Ich versuche, ein flüssiges CSS-Gitter zu erstellen, es funktioniert in Firefox und IE8 +, aber NICHT in Safari / Chrome / Opera, wo das Subpixel-Rundungsproblem sichtbar wird:
%Vor%Der Hauptcontainer hat eine Breite von 100%, und wenn Sie die Browsergröße in Safari / Chrome / Opera ändern, sehen Sie, wie die abgerundeten Breiten inkonsistent sind.
Nach ausführlichen Lektüren über das Problem habe ich verstanden, dass "es keine richtige oder falsche Lösung" für die Sub-Pixel-Rundung gibt, aber der Firefox-Weg scheint der beste Kompromiss für mich zu sein. (Wenn ich zum Beispiel 4 divs auf eine Breite von 25% setze, erwarte ich, dass der abgedeckte Bereich 100% beträgt.)
Ich würde gerne wissen, ob es eine CSS-Lösung gibt, die ich verpasst habe, oder alternativ etwas JavaScript, um das Problem zu lösen.
Danke!
UPDATE: Ab Mai 2014 scheinen Chrome 33 und Safari 7 den "Firefox-Weg" aufgegriffen zu haben.
Das Modul OOCSS-Framework von OOcSS (Links unten) von Stubbornella behandelt dies, indem es der letzten Spalte die folgenden Überschreibungen gibt:
%Vor%Damit kann die verbleibende Breite innerhalb des Containers belegt werden.
Ein bisschen Browser-Forking (IE, ptzsch ...) ist notwendig, um das gleiche Verhalten zu erhalten: Ссылка Ссылка
Es ist nervig, dass es keine gute Option dafür gibt, die Pixel für jeden Browser auf und ab rundet, aber stattdessen mache ich normalerweise:
%Vor%Dadurch wird das letzte Kind nach rechts verschoben, so dass die px-Unausgeglichenheit nicht offensichtlich ist, aber wenn es das einzige Element ist (z. B. ein div mit 33% Breite), wird es weiter nach links schweben.
Tags und Links javascript css rounding subpixel fluid