12

这让我一整天都在发疯,我无法找到其他人在哪里记录了这种差异。

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 声明并减去填充和边距,我认为这是不正确的。

这是一个错误,我做错了什么,IE11返回计算值不同是一个已知的事实吗?

4

3 回答 3

7

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

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

于 2016-08-09T23:33:35.873 回答
1

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

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

于 2014-07-12T20:38:32.647 回答
0

使用 polyfill

有两个 polyfill 可以修复这个 bug:

  1. 乔纳森尼尔 / Polyfills-for-IE8

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

  1. 乔纳森尼尔 / polyfill

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

看起来它解决了这个问题。

使用第一个 polyfill 进行演示

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

带有第二个 polyfill 的演示

//look at demo
于 2016-04-06T13:05:35.980 回答