javascript - jquery innerWidth/outerWidth 和 javascript clientWidth/offsetWidth 在 chrome 上给出了错误的值

Question

我有一个 HTML 标签 <a>在 div 里面. div 样式使用字体粗细为 700 的 'Lato' 字体。

当我尝试获取 a 时标记宽度，我在 chrome 中得到了错误的值。

我试过:

width()
outerWidth()
innerWidth()
clientWidth
offsetWidth

他们都给我错误的值(value)观。

我还注意到，当我删除 font-weight css 样式时，这个问题就消失了。

有什么想法吗？

谢谢

Answer 1

<a>是一个内联元素。因此它不使用盒子模型。把它想象成“滑”。我不确定为什么它会使用不同的字体粗细。

您可能想要测量 <a> 的第一个 block 级父级的 innerWidth .

类似于:

$('<a>').closest('div').innerWidth();

或者，您可以使用 css 使其成为一个 block ，然后您现有的 js 应该可以工作:

a { display: inline-block; }