Question

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

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

如果我然后运行以下javascript / jquery代码，使用Safari（5.0.6）和Chrome（16.0.x）将我的textarea的高度减半：

$('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/）的框的高度。

Answer 2

jQuery计算中的错误。

解决方案：

var height = $this.outerHeight() - Number($this.css('padding-top').split('px')[0]) - Number($this.css('padding-bottom').split('px')[0]);

如果你有边框 - 也计算它们

使用box-sizing时，jQuery.height（）在WebKit和Firefox中的行为有所不同：border-box

2 个答案: