getComputedStyle che segnala altezze diverse tra Chrome/Safari/Firefox e IE11

Question

Questo mi ha fatto diventare un po 'pazzo tutto il giorno e non sono stato in grado di trovare dove qualcun altro ha documentato questa discrepanza.

window.getComputedStyle(el).height 

Vedere http://jsfiddle.net/ZwF9H/6/ per la demo.

Quello che mi aspetto è che window.getComputedStyle() debba restituire lo stesso valore di altezza calcolato tra tutti i browser. Internet Explorer 11 sta facendo qualcosa di diverso. (In realtà anche IE 9 e 10, ma IE 11 è il primo in cui è possibile ottenere gli strumenti di sviluppo.)

Per tutti gli altri browser, l'altezza calcolata è l'altezza impostata nel css sia essere nel foglio di stile o in linea sull'elemento textarea.

IE11 ignora il dimensionamento della casella: dichiarazione border-box e sottrae padding e margine, che a mio avviso non sono corretti.

Si tratta di un errore, sto facendo qualcosa di sbagliato, è un fatto noto che IE11 restituisce valori calcolati in modo diverso?

Answer 1

Element.height specifica l'altezza all'interno dell'area del contenuto, escluso il riempimento o il bordo. C'è più informazioni a riguardo qui (https://developer.mozilla.org/en-US/docs/Web/CSS/height).

Suggerisco di utilizzare $ el.outerHeight() di jQuery se si dispone di tale opzione.

Answer 2

Usa polyfill

Ci sono due polyfills che risolve questo bug:

1. jonathantneal/Polyfills-for-IE8

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

2. jonathantneal/polyfill

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

Sembra che risolva il problema.

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

Ho avuto lo stesso problema con IE11, dove è stato ignorato l'imbottitura box-sizing: border-box; e quindi è stato sottraendo l'altezza border-box, dandomi più piccolo height valori di Chrome segnalati.

ho scoperto che getBoundingClientRect().heightha riportato alla giusta altezza (osservando correttamente box-sizing: border-box;) in IE11 e Chrome. Quindi questo ha risolto il problema per me.