它在jQuery API中说明:
Note that .height() will always return the content height,regardless
of the value of the CSS box-sizing property. As of jQuery 1.8,this
may require retrieving the CSS height plus box-sizing property and
then subtracting any potential border and padding on each element when
the element has box-sizing: border-box. To avoid this penalty,use
.css( “height” ) rather than .height().
我尝试了以下示例
用CSS
.boxA{
padding: 20px;
background-color: yellow;
box-sizing: border-box;
margin: 50px;
}
.boxB{
height: 50px;
background-color: red;
}
根据jQUery API,我确信
$('#wrapper').height($('#wrapper').height());
将boxA的高度设置为50px(因为内容高度为50px),但我发现高度设置为90px.
但是,如果我使用
$('#wrapper').css('height',$('#wrapper').height()+"px");
boxA的高度为50px,因此缩小.为什么第一种方法也不能产生50px的高度?
此外,命令
$('#wrapper').height($('#wrapper').css('height'));
将boxA的高度设置为130px但$(‘#wrapper’).css(‘height’)返回90.这里发生了什么?
您可以在jFiddle中找到这些示例.
最佳答案
看起来.height()总是通过内容框来衡量,但是在应用新值时它会考虑大小调整大小,因此它会将测量的内容框值添加到其余设置中,因为框已经设置了边框.
如果你在demo中将box-sizing更改为content-box,它的行为将完全相同(在所有情况下都会将50px设置为每个框,并且对于content-box值,所有框都将具有90px).
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。