当使用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屋！