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

【问题标题】：jQuery underestimates the width and height of some elements on a pagejQuery 低估了页面上某些元素的宽度和高度
【发布时间】：2013-10-22 19:37:04
【问题描述】：

我正在尝试在用户界面教程中突出一些页面元素（请参阅CSS3 spotlight effect using a rounded rectangle with gradients）。

例如，这里是导航栏：

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

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

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

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

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

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

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

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

【问题讨论】：

outerHeight() 和 outerWidth() 怎么样？
@f00bar 是否有可能height() 实际上正在为该元素计算innerHeight() 而为其他元素计算outerHeight()？那会很有趣...
@AndrewMao 它的不同是因为 box-sizing 属性。检查developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

如果（它是边框）

 css width = element content width + padding + border

如果（它是填充框）

css width = element content width + padding

如果（默认为 content-box ）

css width = element content width

身高也是如此

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

如果您希望元素的宽度和高度带有内边距，您可以使用.innerWidth() 和innerHeight() 方法。

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

【讨论】：