使用 box-sizing:border-box 时，jQuery.height() 在 WebKit 和 Firefox 中的行为不同
我有一个应用了以下样式的文本区域：
textarea {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
如果我随后运行以下 javascript/jquery 代码，则使用 Safari(5.0.6) 和 Chrome(16.0.x) 我的文本区域的高度会减半：
$('textarea').each( function() {
var $this = $(this);
$this.height( $this.height() );
}
根据 . height()，这是预期的行为，因为 .height() 返回内容高度（无填充、边框），无论 box-sizing 属性如何，但 .height( value ) 设置内容size 占 box-sizing 属性的大小。因此，如果我的文本区域有 content-height:17px 和 padding-height:15px，.height() 将返回 17px。然后，如果我设置 .height(17) 我的文本区域曾经是 32px 高，现在只有 17px 高。
我的实际应用程序正在使用 jQuery.fn.autoResize 1.14 (https://github.com/padolsey /jQuery.fn.autoResize) 在应用了框大小的文本区域上。该代码采用了与我上面描述的类似的特技。
它在 FireFox 10 中工作正常。（也就是说，FireFox 在获取和设置高度时以更对称的方式考虑盒子大小。）
我的问题是：错误在哪里，我应该在哪里寻找/提出解决方法？ jQuery.fn.autoResize 插件、jQuery 团队、webkit 还是 FireFox？
I have a textarea with the following style applied:
textarea {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
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() );
}
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.
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.
It works fine in FireFox 10. (That is, FireFox accounts for box-sizing in a more symmetrical way when getting and setting height.)
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
该错误位于 jQuery (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 thebox-sizingproperty. 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/).jQuery 计算中的错误。
解决方案：
如果有边界 - 也计算它们
Bug in jQuery calculations.
Solution:
If you have borders - also calculate them