Kraft Chrome Subpixel-Rendering zu verwenden für Schwimmer

Question

I 8 Bilder von einander mit

width: 25%; 
float: left; 

Hier ist eine Geige schwebte haben ich versucht: https://jsfiddle.net/y06z0em1/

Wenn Sie den Abschnitt Ändern der Größe, die die Bilder in, Sie werden sehen, dass es Zeiten gibt, wenn es bricht, weil einige der Bilder um einen Bruchteil eines Pixels aus sind. Könnte ich das mal so ändern, dass jedes Pixel immer aufrundet oder abrundet?

Danke!

Answer 1

Browser runden Fraktionellen Pixel automatisch und das ist Browser-spezifisch, einige runden es, einige nach unten; Es gibt keine Möglichkeit, das eine oder andere mit CSS zu zwingen.

Eine Lösung könnte sein, mit LESS zu arbeiten, es gibt Funktionen dafür (ceil, floor).

Aber wenn Sie eine Lösung mit CSS benötigen, würde ich nur vorschlagen, die Breite als calc(100% - 0.5px)/calc(100% -1px) oder 99.9% definieren. Das ist einfach nicht perfekt, aber eine Lösung. Sie können es anpassen, wie Sie möchten und wie es für Sie funktioniert.

Aber Ich bin nicht sicher, dass Ihr Problem daraus entsteht. Werfen Sie einen Blick auf die folgende Geige und sagen Sie mir, ob es Ihr Problem löst. Anstatt zu schweben benutze ich hier ein Layout basierend auf display:inline-block, und es scheint so, als gäbe es kein Problem. https://jsfiddle.net/a693yj52/

Answer 2

Ich würde die Verwendung von Flexbox hier empfehlen.

Es würde wie folgt aussehen:

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.container > * { 
    flex-basis: 25%; 
    height: auto; 
}