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

Question

我试图在用户界面教程中对某些页面元素进行聚焦（请参阅CSS3 spotlight effect using a rounded rectangle with gradients）。

例如，这是导航栏：

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

然而，我页面上的一个元素给了我麻烦。这是它在Chrome中的定位：

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

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

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

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

这个元素导致jQuery显示不正确的高度和宽度是什么？一些其他信息：

• 整个页面都在border-box大小调整，但input元素除外，这些元素与bootstrap不兼容。
• 所有边都有9px填充，边框为1px，这弥补了尺寸差异，但是还有许多其他边框/填充元素，其中尺寸计算正常，这是唯一奇怪的元素。例如，上面显示的bootstrap导航栏在左侧和右侧有20px的填充，但宽度计算正确。

Answer 1

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

if（是边框）

 css width = element content width + padding + border

if（它是填充框）

css width = element content width + padding

如果（它是内容框，默认情况下）

css width = element content width

等高度

---

jQuery .width（）始终给出元素内容宽度。

如果您希望元素宽度和高度与填充，您可以使用.innerWidth()和innerHeight()方法。

如果您想要包含边框尺寸，请使用.outerWidth()和.outerHeight()

Answer 2

在许多地方很难解释宽度，但是，它被更恰当地定义为“上下文框”的宽度。更多信息，here。