Jquery与box-sizing不兼容？

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();将排除填充和边框，仅计算宽度;