Это заставило меня немного сумасшедшим весь день, и я не смог найти, где кто-либо еще зарегистрировал это несоответствие.
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 возвращает вычисленные значения по-разному?
У меня была такая же проблема с 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).
Я бы предложил использовать jQuery $el.outerHeight(), если у вас есть эта опция.
Есть два полина, которые исправляют эту ошибку:
https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js
https://github.com/jonathantneal/polyfill/blob/master/polyfills/getComputedStyle/polyfill.js
Похоже, он исправляет проблему.
//SO says that I must add code here, but it too long
//look at demo