NUR Firefox verhält sich seltsam mit Inline-Block-Element

Question

Ich spielte kürzlich mit reaktionsschnellen CSS-Grids, so dass ich versuchte, eines meiner eigenen für neues Projekt zu machen. Ich entschied mich, es ziemlich einfach zu halten, also benutzte ich display:inline-block Eigentum für meine Zellen.

Dies würde entweder margin:-0.25em "Hack" oder Entfernung von Leerzeichen zwischen inline-block Elemente erfordern, um dem letzten Element zu begegnen, das zu einer neuen Zeile springt.

Ich entschied mich für die Entfernung von Leerraum zwischen den Spalten. Es funktioniert sogar in IE8 ausgezeichnet, aber aus irgendeinem Grund verhält sich der neueste Firefox so, als ob dazwischen ein Leerzeichen wäre.

Die einzige Erklärung, die ich jetzt denken kann, ist, dass Firefox HTML-Code vor dem Rendern neu formatiert und in diesem Prozess new line nach jedem </div> schließenden Tag hinzufügt.

Hier ist mein JS Fiddle

Vielen Dank im Voraus!

[Answer] I vergessen haben box-sizing firefox Präfix zu setzen, und Wattierung, die wegen daß als Abstand zwischen den Spalten aus überschüssigem Gehalt serviert.

ist es durch Hinzufügen von: -moz-box-sizing: border-box; zu col Elemente behoben.

Answer 1

Nachdem Sie mit Ihrem Code herumgespielt haben, ist das Problem der 10px Padding. Wenn Sie diese Zeile entfernen, wird Firefox mit Chrome identisch angezeigt (ich habe es im IE nicht getestet).

Wirklich ist es wahrscheinlich ein Versehen auf firefox's Teil. Ich würde mich nicht zu sehr darum kümmern, da Ihre Seite immer noch lesbar ist, wenn auch ein bisschen hässlich.

Mein Vorschlag, wenn Sie so geneigt sind, es zu reparieren, ist, die Zellen "manuell" aufzufüllen, indem Sie ihre relativen Positionen justieren.

Answer 2

Versuchen vertical-align: top mit display: inline-block

Answer 3

Jede CSS-Gitter (Pure CSS zum Beispiel), die Inline-Block als Anzeigeart verwendet wird, muss ein Element (in der Regel ein div) als Ein sofortiges Kind von Ihrem Rasterelement, auf dem Sie Ihre Polsterung injizieren. Sehen Sie sich die Pseudo-Codebeispiel unten (beachten Sie diese fiktive Gitter Syntax):

... 
<style> 
    .inner-wrap { 
     padding: 1em; 
    } 
</style> 
... 
<div class="grid-one-third"> 
    <div class="inner-wrap"> 
    </div> 
</div> 

Im obigen Beispiel die Anwendung Polsterung direkt auf „netz ein Drittel“ bricht Ihr Layout. Anwenden auf "inner-wrap" obwohl wird das gewünschte Ergebnis, ohne die Notwendigkeit für etwas wie Box-Sizing: border-box, die ich sehe es als eine Hack-Lösung für das Problem in diesem Fall.