12

これは一日中私を少しバタバタさせており、他の誰かがこの不一致を文書化した場所を見つけることができませんでした.

window.getComputedStyle(el).height

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

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

他のすべてのブラウザーの場合、計算された高さは、スタイルシートまたは textarea 要素のインラインに関係なく、css で設定された高さです。

IE11 は box-sizing: border-box 宣言を無視しており、パディングとマージンを差し引いていますが、これは間違っていると思います。

これはバグですか、何か間違ったことをしていますか? IE11 が計算値を異なる方法で返すことは既知の事実ですか?

4

3 に答える 3

7

私はIE11で同じ問題を抱えていました.IE11は無視していたbox-sizing: border-box;ため、ボーダーボックスの高さからパディングを差し引いていたためheight、Chromeが報告した値よりも小さな値が得られました.

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

于 2016-08-09T23:33:35.873 に答える
1

Element.height は、パディングや境界線を含まない、コンテンツ領域内の高さを指定します。詳細については、こちら ( https://developer.mozilla.org/en-US/docs/Web/CSS/height ) を参照してください。

そのオプションが利用可能な場合は、jQuery の $el.outerHeight() を使用することをお勧めします。

于 2014-07-12T20:38:32.647 に答える
0

ポリフィルを使用

このバグを修正するポリフィルが 2 つあります。

  1. jonathantneal / Polyfills-for-IE8

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

  1. ジョナサンニール / ポリフィル

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

問題が解決したようです。

最初のポリフィルを使用したデモ

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

2 番目のポリフィルを使用したデモ

//look at demo
于 2016-04-06T13:05:35.980 に答える