Jquery與盒子大小不兼容？

Question

目前，所有我想要做的就是抓住一個div的使用

$(header).height() 

頭是一個div元素的高度。

目前在我的CSS我有以下幾點：

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

這意味着所有的填充，邊框等不影響該元素的總規模。它似乎工作得很好。 但是，當我與$(element).Height()進行方程式並且對象具有填充或邊框時，即使將box-sizing設置爲border-box，它也會將這些額外的尺寸添加到div的尺寸中。

例子：

http://jsfiddle.net/CeuBQ/

Answer 1

嗯，看來我在寫這個問題我想通了這個問題。

顯然，div實際上並沒有使用box-sizing:來保持它的尺寸，但是邊框或填充從它們中減去。我必須說一件有趣的事情，我從未想過這件事。

雖然，要獲得元素的真實高度，您需要使用jQuery的outerHeight函數（包括填充邊框等）。

($(headerPad).outerHeight());

修正：http://jsfiddle.net/CeuBQ/2/

Answer 2

變化

$(header).height() 

到

$(header).innerHeight() 

jQuery的.innerHeight();將排除填充和邊框和O只計算寬度;