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

在一个用户界面教程中，我试图将焦点放在一些页面元素上（请参阅）

例如，下面是导航栏：

和聚光灯（页面的其余部分变暗）：

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

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

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

>var blah=$（“.user list”）
[
​…​​
]
>诸如此类的高度
60
>等等。宽度（）
330

这将导致在绘制聚光灯时聚光灯过小：

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

这个元素是怎么导致jQuery显示不正确的高度和宽度的？一些补充资料：

• 整个页面都在

  边框框

  大小调整中，除了

  输入

  元素外，这些元素与引导程序不兼容
• 所有边上都有9px的填充和1px的边框，这弥补了大小的差异，但是还有许多其他带有边框/填充的元素可以正确计算大小，这是唯一一个奇怪的元素。例如，上面显示的引导导航栏在左右两侧有20px的填充，但宽度计算正确

---

元素的css宽度为（根据框大小css属性）

如果（它是边框框）

如果（它是填充框）

If（默认为内容框）

身高也是如此

---

width（）始终为元素内容提供宽度

如果希望元素的宽度和高度带有填充，可以使用

.innerWidth（）

和

innerHeight（）

方法

---

如果您希望包含边框大小，而不是使用

.outerWidth（）

和

.outerHeight（）

宽度在许多地方解释得不好，但是，它更适合定义为“上下文框”的宽度。更多信息，.

关于

outerHeight（）

和

outerWidth（）

？@f00bar是否可能

height（）

实际计算此元素的

innerHeight（）

，以及其他元素的

outerHeight（）

？这将是有趣的…@AndrewMao它的不同之处在于盒子的大小属性。检查

 css width = element content width + padding + border

css width = element content width + padding

css width = element content width