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。