Jquery not compatible with box-sizing?

Jquery not compatible with box-sizing?

本文关键字：box-sizing with compatible not Jquery      更新时间：2023-09-26

目前我想做的就是使用

获取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/

嗯，似乎我在写问题的时候就发现了问题所在。

显然，div实际上并没有使用box-sizing:保持它的尺寸，但是边界或填充从它们中减去。我必须说一件有趣的事，我从来没有想过。

但是，要获得元素的实际高度，您需要使用jQuery的outerHeight函数，该函数包含padding - border等。

( $(headerPad).outerHeight() );

固定:

http://jsfiddle.net/CeuBQ/2/

变化

$(header).height() 


$(header).innerHeight()

jquery .innerHeight();将排除填充和边框，只计算宽度;

相关文章：