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

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

window.getComputedStyle(el).height

Для демонстрации см. http://jsfiddle.net/ZwF9H/6/.

Я ожидаю, что window.getComputedStyle() должен возвращать одинаковое значение вычисленной высоты между всеми браузерами. Internet Explorer 11 делает что-то другое. (На самом деле, IE 9 и 10 тоже, но IE 11 был первым, с которым я мог бы заставить инструменты dev работать.)

Для всех других браузеров вычисленная высота - это высота, установленная в css, независимо от того, находится ли она в таблице стилей или встроенном элементе textarea.

IE11 игнорирует объявление box-sizing: border-box и вычитает отступы и поля, что, я думаю, неверно.

Является ли это ошибкой, делаю ли я что-то не так, разве это факт, что IE11 возвращает вычисленные значения по-разному?

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Используйте polyfill

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

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-го polyfill

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

Демо со вторым polyfill

//look at demo