2013-07-16 8 views
9

Ich habe gerade entdeckt und mag getBoundingClientRect, weil es Sub-Pixel-Genauigkeit enthält. Das hat mir erlaubt, die konsequente Ausrichtung zu erstellen, auch wenn der Benutzer Ctrl+ oder Ctrl +-.Browser-Unterstützung der Breite und Höhe Eigenschaften von getBoundingClientRect?

Es hat Eigenschaften top, bottom, left, right, & width & height.

Es ist einfach, die Browser-Unterstützung im Internet zu finden, aber nicht so sehr für die Eigenschaften width und height im Besonderen. Es scheint, dass dies nach der Tat hinzugefügt wurde. Es funktioniert in Firefox, Chrome und IE10, aber was ist mit IE8 & IE9? Ich kann das nicht bequem testen.

+0

Können Sie die Entwickler Sachen in IE10, um es in IE8-Modus zu setzen? (Ich bin mir nicht sicher, IE10 kann das tun, aber IE9 im IE8-Modus würde wahrscheinlich so etwas richtig.) – Pointy

+0

Auch ist "Breite" anders als "rechts - links"? – Pointy

+0

* "Benutze den Entwicklerkram" * Historisch gesehen waren die F12-Tools im IE in der Lage, ältere HTML- und CSS-Parser korrekt wiederzugeben, aber ich habe bemerkt, dass es bei den alten JavaScript-Interpretern nicht genau funktioniert. –

Antwort

9

In IE9 als IE8:

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

In IE9 als IE9:

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

Also würde ich sagen, ja auf IE9, nicht auf IE8 ...

+2

IE 7 unterstützt auch nicht Breite und Höhe. Danke Microsoft für die janky Programmiererfahrung! – Phil

+1

Wir haben entdeckt, dass rechts-links in IE8 als Ganzzahlmathematik ausgeführt wird, während Breite in IE9 Gleitkomma sein kann. Ein halber Pixel kann beträchtlich sein, wenn Sie versuchen, zwei Elemente auf einer Seite auszurichten. –