javascript - jQuery 低估了页面上某些元素的宽度和高度

Question

在用户界面教程期间，我试图在某些页面元素上绘制聚光灯（请参阅CSS3 聚光灯效果使用带渐变的圆角矩形）。

例如，这是导航栏：

并突出显示（页面的其余部分变暗）：

但是，我页面上的元素之一给我带来了麻烦。这是它在 Chrome 中的定位：

然而，jQuery 认为它是 330 像素乘 60 像素：

> var blah = $('.user-list')
[
<div class=​"well well-skinny user-list">​…​&lt;/div>​
]
> blah.height()
60
> blah.width()
330

这会导致聚光灯在绘制时太小：

奇怪的是，页面上还有很多其他元素（如导航栏）的大小计算正确，聚光灯也能正确显示它们。

这个导致 jQuery 显示不正确的高度和宽度的元素是怎么回事？一些附加信息：

• 整个页面都在border-box调整大小，除了input元素不能很好地与引导程序配合使用。
• 在所有边上都有 9px 的填充和 1px 的边框，这弥补了尺寸差异，但是还有许多其他带有边框/填充的元素可以正常计算尺寸，这是唯一奇怪的元素。比如上图的bootstrap navbar左右两边有20px的padding，但是宽度计算是正确的。

Answer 1

宽度在许多地方都没有得到很好的解释，但是，它被更恰当地定义为“上下文框”的宽度。更多信息，请点击此处。

Answer 2

元素的 css 宽度是（根据 box-sizing css 属性）

如果（它是边框）

 css width = element content width + padding + border

如果（它是填充框）

css width = element content width + padding

If(默认为 content-box )

css width = element content width

所以对于高度

---

jQuery .width() 总是给出元素内容的宽度。

如果你想要元素的宽度和高度和填充，你可以使用.innerWidth()andinnerHeight()方法。

如果您想包含边框大小而不是使用.outerWidth()和.outerHeight()