使用box-sizing时,jQuery.height()在WebKit和Firefox中的行为有所不同:border-box

Question

我有一个textarea应用了以下样式:

textarea {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

如果我然后运行以下javascript/jquery代码,我的textarea的高度将使用Safari(5.0.6)和Chrome(16.0.x)减少一半:

$('textarea').each( function() {
    var $this = $(this);
    $this.height( $this.height() );
}

根据.height()的jQuery文档,这是预期的行为,因为.height()返回内容高度(无填充,边框),无论box-sizing属性如何,但.height(value)设置内容大小对盒子大小的属性进行说明.因此,如果我的textarea具有content-height:17px和padding-height:15px,则.height()将返回17px.然后,如果我设置.height(17)我曾经是32px高的textarea现在只有17px高.

我的真实应用程序是在应用了box-sizing的textareas上使用jQuery.fn.autoResize 1.14(https://github.com/padolsey/jQuery.fn.autoResize).该代码与我上面描述的相似.

它在FireFox 10中运行良好.(也就是说,FireFox在获取和设置高度时以更加对称的方式考虑盒子大小.)

我的问题是:错误在哪里,我应该在哪里寻找/提出一个解决方法？jQuery.fn.autoResize插件,jQuery团队,webkit或FireFox？

Answer 1

该错误发生在jQuery(http://bugs.jquery.com/ticket/11004)中,该错误$(el).height() 不考虑该box-sizing属性.该修复程序计划在v1.8中进行,但同时您可以使用$(el).outerHeight()该框来计算填充和边框的高度(http://api.jquery.com/outerHeight/).