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:
.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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Stubbornella die OOCSS-Frameworks (links siehe unten) raster-Modul befasst sich mit dieser, indem Sie die Letzte Spalte der folgenden überschreibungen:
Dies ermöglicht es, zu belegen, was Breite bleibt innerhalb des Containers.
Etwas von browser-Verzweigung (IE, ptzsch...) ist notwendig, um das gleiche Verhalten:
https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css
https://github.com/stubbornella/oocss/wiki/grids
unit
mit.line > *
und.lastUnit
mit.line > *:last-child
.line
Klasse, für eine abgespeckte Fall, wo wir annehmen alle gebrochene breiten wollen, werden gleich Breite: jsfiddle.net/barney/32Q8BEs saugt, gibt es nicht eine nette option für dieses, Runde Pixel oben und unten für jeden browser, aber statt der, dass ich in der Regel tun:
Dieser Schwimmer das Letzte Kind auf rechts, so dass der px unalignment ist nicht offensichtlich, aber wenn es das einzige element (z.B. ein div, dass 33% der Breite), dann wird es weiter float left.