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

我有一个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 / ）。

Answer 2

jQuery计算中的错误。

解：

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

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