当使用box-sizing:border-box时,jQuery.height()在WebKit和Firefox中的行为不同 [英] jQuery.height() behaves differently in WebKit and Firefox when using box-sizing:border-box
问题描述
我有一个textarea应用了以下样式:
I have a textarea with the following style applied:
textarea {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
如果我然后运行以下javascript / jquery代码,我的textarea的高度被剪切一半使用Safari(5.0.6)和Chrome(16.0.x):
If I then run the following javascript/jquery code, my textarea's height gets cut in half using Safari(5.0.6) and Chrome(16.0.x):
$('textarea').each( function() {
var $this = $(this);
$this.height( $this.height() );
}
根据.height()的jQuery文档,这是预期的行为,因为.height()返回内容高度(无填充,边框)不管box-sizing属性是什么,但是.height(value)设置 box-sizing属性的内容大小,因此如果我的textarea有content-height:17px和padding-height:15px, .height()将返回17px。然后,如果我设置.height(17)我的textarea以前是32px高现在只有17px高。
According to the jQuery docs for .height(), this is the expected behavior because .height() returns the content height (no padding, border), regardless of the box-sizing property, but .height( value ) sets the content size accounting for the box-sizing property. So if my textarea has content-height:17px and padding-height:15px, .height() will return 17px. Then, if I set .height(17) my textarea that used to be 32px high is now only 17px high.
world应用程序正在使用jQuery.fn.autoResize 1.14( https://github.com/padolsey/jQuery.fn.autoResize)在应用box-sizing的textareas上。
My real-world application is using jQuery.fn.autoResize 1.14 (https://github.com/padolsey/jQuery.fn.autoResize) on textareas that have box-sizing applied. That code pulls a similar stunt to what I've described above.
它在FireFox 10中工作得很好。(也就是说,FireFox考虑到box-sizing在一个更对称的)
It works fine in FireFox 10. (That is, FireFox accounts for box-sizing in a more symmetrical way when getting and setting height.)
我的问题是:错误在哪里,我应该在哪里寻找/提出一个解决方法? jQuery.fn.autoResize插件,jQuery小组,webkit或FireFox?
My question is: Where is the bug, and where should I look for/propose a workaround? The jQuery.fn.autoResize plugin, the jQuery team, webkit, or FireFox?
推荐答案
错误是在jQuery href =http://bugs.jquery.com/ticket/11004> http://bugs.jquery.com/ticket/11004 ),使 $(el).height ()
不考虑 box-sizing
属性。该修复程序计划在v1.8中出去,但是同时您可以使用 $(el).outerHeight()
获取框的高度填充和边框( http://api.jquery.com/outerHeight/ )。
The bug is in jQuery (http://bugs.jquery.com/ticket/11004) that makes $(el).height()
not account for the box-sizing
property. The fix is scheduled to go out in v1.8, however in the mean time you can use $(el).outerHeight()
to get the height of the box accounting for padding and border (http://api.jquery.com/outerHeight/).
这篇关于当使用box-sizing:border-box时,jQuery.height()在WebKit和Firefox中的行为不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!