Befestigung Sub-Pixel-Rundung-Problem in einem CSS-Fluid Grid

Ich versuche zu schaffen, ein flüssiges CSS-grid, es funktioniert in Firefox und IE8+, aber NICHT in Safari/Chrome/Opera, wo die sub-pixel-Rundung-Problem wird sichtbar:

http://jsfiddle.net/bJKQ6/2/

.column {
  float: left;
  width: 25%;
}

Den main-container eine Breite von 100%, und wenn Sie, ändern Sie die browser-Größe, in Safari/Chrome/Opera können Sie sehen, wie die abgerundeten breiten sind inkonsistent.

Nach umfangreichen liest über das problem habe ich verstanden, dass "es gibt keine richtige oder falsche Lösung" für die sub-pixel-Rundung, aber der Firefox Weg scheint der beste Kompromiss für mich.
(Zum Beispiel, wenn ich 4 divs bei einer Breite von 25% erwarte ich, dass die überdachte Fläche zu 100%.)

Ich würde gerne wissen, ob es eine CSS Lösung, die ich verpasst, oder alternativ einige JavaScript um das problem zu lösen.

Dank!

UPDATE: Mai 2014, Chrome 33 und Safari 7 zu haben scheinen, nahm den "Firefox Weg".

  • Ich antwortete auf eine ähnliche Frage vor ein paar Tagen hier stackoverflow.com/questions/9914209/... während es noch nicht zu Ende in der alle Elemente exakt die gleiche Breite, ist es wahrscheinlich so nah wie Sie dran kommen ohne javascript.
  • Danke für die Antwort. Ich möchte, um loszuwerden, die "Zeile" wrapper zu mehr Flexibilität, fügte ich ein weiteres Beispiel in der Geige zeigt ein Daumen-Galerie, ohne zu müssen, wickeln Sie jede Zeile.
InformationsquelleAutor gyo | 2012-03-09
Schreibe einen Kommentar