getComputedStyleはChrome/Safari/FirefoxとIE11の高さが異なることを報告しています

Question

これは一日中私を少しばたたび運転していましたが、他の誰かがこの矛盾を文書化した場所を見つけることができませんでした。

window.getComputedStyle(el).height 

デモはhttp://jsfiddle.net/ZwF9H/6/を参照してください。

私が期待しているのは、window.getComputedStyle（）は、すべてのブラウザ間で計算された同じ高さの値を返す必要があるということです。 Internet Explorer 11は何か違うことをやっています。 （実際にはIE 9と10も同様ですが、IE 11が最初に開発ツールを手に入れることができました）

他のすべてのブラウザでは、計算された高さはcssに設定された高さですtextarea要素のスタイルシートまたはインラインにあること。

IE11はボックスサイズ：border-box宣言を無視していて、パディングとマージンを差し引いていますが、これは間違っていると思います。

これはバグですか、何か間違っていますか？IE11が計算された値を違う方法で返すということは分かっていますか？

Answer 1

Element.heightは、コンテンツ領域内の高さを指定します。パディングやボーダーは含みません。詳細はこちら（https://developer.mozilla.org/en-US/docs/Web/CSS/height）です。

jQueryの$ el.outerHeight（）を使用することをお勧めします。

Answer 2

使用ポリフィル

このバグ修正2 polyfillsあります

1. jonathantneal/Polyfills-for-IE8

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

jonathantneal/polyfill

<オール= "2" スタート>は、

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

、それは問題を修正するように見えます。

Demo with 1st polyfill

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

Demo with 2nd polyfill

//look at demo 

Answer 3

私はそれがbox-sizing: border-box;を無視したIE11と同じ問題を抱えていたので、それは私に小さなを与え、国境・ボックスの高さからパディングを引きましたheightの値はChromeよりも高くなっています。

私はgetBoundingClientRect().heightはIE11とChromeで（適切box-sizing: border-box;を観察する）適​​切な高さを報告していたことがわかりました。それが私の問題を解決しました。