Ich habe eine Seite, deren div-Elemente mit JavaScript ausgerichtet sind. Das JavaScript überprüft einfach eine Menge von div-Elementen, um die maximale offsetWidth zu finden, und legt dann alle Breite für div-Elemente fest die maximale offsetWidth sein. Es funktioniert perfekt in den meisten Browsern und Locales, aber es schlägt auf Französisch-Frankreich in Firefox auf Mac. In diesem Fall wird der Inhalt von div umschlossen.
%Vor%für den obigen HTML-Code unterhalb des Code-Reports "79".
%Vor%aber unter dem Code-Bericht "79.1333px".
%Vor%Die Lücke zwischen 79.1333 und 79 macht die falsche Breite auf Inline-Stil festgelegt.
Ich dachte immer, dass offsetWidth und width immer Ganzzahl sein sollten. Gibt es eine Möglichkeit, offsetWidth richtig zu runden?
Es gibt einen Unterschied zwischen der CSS-Stilregel (welche getComputedStyle() oder Renzo Koois getStyle() Ihnen geben wird) und der tatsächlich berechneten Breite in Pixeln, wie vom User-Agent festgelegt.
Dies ist teilweise darauf zurückzuführen, dass Teilpixelwerte in CSS möglich sind, aber der Benutzeragent muss wählen, wie Teilpixel gerendert werden sollen (derzeit glaube ich, dass sie alle auf- und abrunden, aber besonders beim Übersetzen sehr inkonsistent sind) Prozent zu Pixeln [siehe hier ]).
Es ist wichtig, dass diese Unterschiede bestehen, insbesondere, wenn Benutzeragenten das Ganzseiten-Zoomen implementieren.
Ich habe zum Beispiel einen Testfall damit gemacht:
%Vor% In Safari 4 Beta in einem Schritt gezoomt, wird die CSS-Breite mit 17.5px und die Höhe mit 16.1333px angegeben. Aber sein offsetWidth ist 21 Gerätepixel und sein offsetHeight ist 19 Gerätepixel.
Die Moral der Geschichte ist, dass, wenn Sie die tatsächlichen Dimensionen eines Elements abgleichen möchten, es am besten ist, seine CSS-Werte so zu verwenden, wie sie sind, auch wenn sie nicht ganzzahlig sind.
Tags und Links javascript dom firefox width offsetwidth