2013-07-16 9 views
9

Ho appena scoperto e mi piace molto getBoundingClientRect perché include la precisione sub-pixel. Questo mi ha permesso di creare allineamento costante, anche se l'utente digita Ctrl+ o Ctrl +-.Supporto browser delle proprietà width e height di getBoundingClientRect?

Ha proprietà top, bottom, left, right, & width & height.

È semplice trovare il supporto del browser su Internet, ma non tanto per le proprietà width e height in particolare. Sembra che questo è stato aggiunto dopo il fatto. Funziona con Firefox, Chrome e IE10, ma che dire di IE8 & IE9? Non posso testare questi comodamente.

+0

È possibile utilizzare lo sviluppatore di IE10 per metterlo in modalità IE8? (Non sono sicuro che IE10 possa farlo, ma IE9 in modalità IE8 otterrebbe probabilmente qualcosa del genere.) – Pointy

+0

Anche 'width' è diverso da' right-left'? – Pointy

+0

* "usa gli sviluppatori" * Storicamente gli strumenti F12 in IE sono stati in grado di riflettere accuratamente i parser HTML e CSS precedenti, ma ho notato che non funziona in modo accurato sui vecchi interpreti JavaScript. –

risposta

9

In IE9 come IE8:

document.body.getBoundingClientRect() 
[object] { 
    right : 2556, 
    top : 0, 
    bottom : 1195, 
    left : 0 
} 

In IE9 come IE9:

document.body.getBoundingClientRect() 
[object ClientRect] { 
    bottom : 1435, 
    height : 1435, 
    left : 0, 
    right : 2544, 
    top : 0, 
    width : 2544 
} 

Quindi, direi che sì sul IE9, non su IE8 ...

+2

IE 7 inoltre non supporta larghezza e altezza. Grazie a Microsoft per l'esperienza di programmazione janky! – Phil

+1

Abbiamo scoperto che la destra-sinistra in IE8 viene eseguita come matematica intera, mentre la larghezza in IE9 può essere in virgola mobile. Mezzo pixel può essere considerevole se si tenta di allineare due elementi su una pagina. –

Problemi correlati