getComputedStyle сообщает о разной высоте между Chrome / Safari / Firefox и IE11

Это приводило меня в замешательство весь день, и я не смог найти, где еще кто-то зафиксировал это несоответствие.

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 по-другому возвращает вычисленные значения?


javascript internet-explorer getcomputedstyle
person Geuis    schedule 31.10.2013    source источник
comment
Получили ли вы дополнительную информацию об этой проблеме и о том, как ее решить?   -  person Sergio    schedule 15.07.2014

Ответы (3)


arrow_upward
7
arrow_downward

У меня была такая же проблема с IE11, где он игнорировал box-sizing: border-box; и, таким образом, вычитал отступы из высоты рамки, давая мне меньшие значения height, чем сообщает Chrome.

Я обнаружил, что getBoundingClientRect().height сообщил правильную высоту (правильно соблюдая box-sizing: border-box;) в IE11 и Chrome. Так что это решило для меня проблему.

person Jason Frank    schedule 09.08.2016

arrow_upward
1
arrow_downward

Element.height указывает высоту в области содержимого, не включая отступы или границу. Подробнее об этом можно узнать здесь (https://developer.mozilla.org/en-US/docs/Web/CSS/height).

Я бы предложил использовать jQuery $ el.outerHeight (), если у вас есть такая возможность.

person Charlie L    schedule 12.07.2014

arrow_upward
0
arrow_downward

Использовать полифилл

Есть два полифилла, которые исправляют эту ошибку:

  1. jonathantneal / Polyfills-for-IE8

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

  1. jonathantneal / polyfill

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

Похоже, это решает проблему.

Демо с 1-м полифиллом

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

Демонстрация со вторым полифилом

//look at demo
person WebBrother    schedule 06.04.2016