getComputedStyle报告Chrome/Safari/Firefox和IE11之间的不同高度

Question

这一直让我有点慌张,我无法找到其他人记录这种差异的地方.

window.getComputedStyle(el).height

有关演示,请参见http://jsfiddle.net/ZwF9H/6/.

我期待的是window.getComputedStyle()应该在所有浏览器之间返回相同的计算高度值.Internet Explorer 11正在做一些不同的事情.(实际上,IE 9和10也是如此,但IE 11是第一个我可以使用开发工具的工具.)

对于所有其他浏览器,计算出的高度是css中设置的高度,无论是在样式表中还是在textarea元素上内联.

IE11忽略了box-sizing:border-box声明并减去了padding和margin,我认为这是不正确的.

这是一个错误,我做错了什么,是否知道IE11以不同的方式返回计算值？

Answer 1

我曾与IE11,它被忽略了同样的问题box-sizing: border-box;,因此它是从边界框的高度减去填充,让我更小的heightChrome以外的报告值.

我发现在IE11和Chrome 中确实报告了适当的高度(正确观察).所以这解决了我的问题.getBoundingClientRect().height box-sizing: border-box;

Answer 2

Element.height 指定内容区域内的高度，不包括填充或边框。这里有更多关于它的信息（https://developer.mozilla.org/en-US/docs/Web/CSS/height）。

如果您有可用的选项，我建议使用 jQuery 的 $el.outerHeight() 。