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

getComputedStyle reporting different heights between Chrome/Safari/Firefox and IE11

本文关键字：之间 IE11 高度 报告 Chrome Safari Firefox getComputedStyle      更新时间：2023-09-26
这让我一

整天都有些沮丧，我无法找到其他人记录这种差异的地方。

window.getComputedStyle(el).height

有关演示，请参阅 http://jsfiddle.net/ZwF9H/6/。

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

的。

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

IE11忽略了框大小：边框声明并减去填充和边距，我认为这是不正确的。

这是一个错误，我做错了什么，IE11 以不同的方式返回计算值是众所周知的事实吗？

我在IE11上遇到了同样的问题，它忽略了box-sizing: border-box;，因此它从边框高度中减去填充，给我的height值比Chrome报告的要小。

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

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

我建议使用jQuery的$el.outerHeight（），如果你有这个选项的话。

使用填充代码

有两个填充物可以修复此错误：

  1. 乔纳桑特尼尔/Polyfills-for-IE8

https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js

  1. 乔纳桑特尼尔/波利菲尔

https://github.com/jonathantneal/polyfill/blob/master/polyfills/getComputedStyle/polyfill.js

看起来它解决了问题。

使用第一个多边形填充进行演示

//SO says that I must add code here, but it's too long

使用第二个填充填充进行演示

//look at demo
相关文章：