Ich habe kürzlich mit reaktionsfähigen CSS-Gittern gespielt, also habe ich versucht, eines meiner eigenen für ein neues Projekt zu machen. Ich entschied mich dafür, es ziemlich einfach zu halten, also benutzte ich display:inline-block -Eigenschaft für meine Zellen.
Dies würde entweder margin:-0.25em "hack" oder das Entfernen von Leerzeichen zwischen inline-block -Elementen erfordern, um dem letzten Element das Überspringen einer neuen Zeile entgegenzusetzen.
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 mir 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 meine JS Fiddle
Vielen Dank im Voraus!
[ANTWORT]
Ich habe vergessen, firefox-Präfix für box-sizing zu setzen, und das Auffüllen, das als Abstand zwischen den Spalten diente, machte wegen des überschüssigen Inhalts.
Es wurde behoben durch Hinzufügen von: -moz-box-sizing: border-box; zu col elements.
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 nicht im IE getestet).
Wirklich ist es wahrscheinlich ein Versehen auf firefox's Teil. Ich würde mich nicht zu viele Gedanken darüber machen, da Ihre Seite immer noch lesbar ist, wenn auch ein bisschen hässlich.
Mein Vorschlag, wenn Sie so dazu neigen, das Problem zu lösen, besteht darin, die Zellen "manuell" zu puffern, indem Sie ihre relativen Positionen anpassen.
Jedes css-Grid ( reines CSS zum Beispiel), das inline-block als Anzeigestil verwendet, benötigt ein Element (normalerweise ein div) als ein direktes Kind Ihres Rasterelements, in das Sie die Füllung injizieren . Sehen Sie sich das Pseudo-Code-Beispiel an (beachten Sie, dass es sich um eine fiktive Gitter-Syntax handelt):
%Vor%Wenn Sie im obigen Beispiel das Padding direkt auf "Grid-One-Third" anwenden, wird Ihr Layout beschädigt. Wenn Sie es jedoch auf "inner-wrap" anwenden, wird das gewünschte Ergebnis erzielt, ohne dass etwas wie box-sizing: border-box erforderlich ist, was ich in diesem Fall als eine Hack-Lösung für das Problem ansehe .
Tags und Links css grid firefox fluid-layout