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

Question

我试图在用户界面教程（请参阅CSS3 spotlight effect using a rounded rectangle with gradients）期间在某些页面元素上绘制聚光灯。

例如，这里的导航栏：

和备受瞩目（页面的其余部分变暗了）：

不过，我的网页上的内容之一给我带来麻烦。这里就是它的定位在Chrome：

然而，jQuery的认为这是330px由60像素：

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

这导致聚光灯太小，当它被吸入：

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

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

• 整个页面是border-box大小除了input元素，不与引导好发挥。
• 所有边上都有9px填充，边距为1px，弥补了大小的差异，但是还有很多边界/填充的其他元素在尺寸计算正常工作，这是唯一的元素是奇怪的。例如，上面显示的引导程序导航栏在左侧和右侧具有20像素的填充，但宽度计算正确。

Answer 1

的元素的CSS宽度（根据框上浆CSS属性）

如果（它是边界框）

css width = element content width + padding + border 

如果（它是填充盒）

css width = element content width + padding 

如果（它是内容框，它是由默认）

css width = element content width 

因此对于高度

---

的jQuery .WIDTH（）总是给出元素含量宽度。

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

如果你想包括边框大小比使用.outerWidth()和.outerHeight()

Answer 2

宽度在很多地方进行了说明不佳，但是，它更恰当地定义为“上下文盒子”的宽度。更多信息，here。