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 возвращает вычисленные значения по-другому?
3 ответа
У меня была такая же проблема с IE11, где он игнорировал box-sizing: border-box; и таким образом это вычитало отступ от высоты рамки, давая мне меньше height значения, чем Chrome сообщил.
я нашел это getBoundingClientRect().height действительно сообщил правильную высоту (должным образом наблюдая box-sizing: border-box;) в IE11 и Chrome. Так что это решило проблему для меня.
Element.height указывает высоту в области содержимого, не включая отступы или границы. Больше информации об этом здесь ( https://developer.mozilla.org/en-US/docs/Web/CSS/height).
Я бы предложил использовать $el.outerHeight() jQuery, если у вас есть эта опция доступна.
Использовать полифилл
Есть две полифилы, которые исправляют эту ошибку:
https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js
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
Демо со 2-м полифилом
//look at demo