Column-Count-Eigenschaft funktioniert nicht auf Firefox/Firefox Developer Edition

Question

Ich habe die CSS3 Mulit-Column-Funktion verwendet, mit der column-count -Eigenschaft in mehrere Spalten aufgeteilt.
Dies ist mein Code:

div { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    column-count: 3; 
} 

Es ist nicht auf meinem Firefox-Version oder Firefox Developer Edition arbeiten. Der Code ist arbeitet an: Google Chrome, Opera und Microsoft Edge

Ist das ein Fehler oder gibt es eine Lösung?

Answer 1

Ich musste vor ein paar Jahren an etwas Ähnlichem arbeiten, und für was ich mich erinnere, war die Cross-Browser-Unterstützung nicht kugelsicher (besonders mit älteren Browsern), aber das sollte ziemlich gut funktionieren.

https://codepen.io/patriziosotgiu/pen/jGporg?editors=1100

Setzen Sie den column-break in einen Behälter außerhalb des ul-Tag. Auch wenn Sie an komplexeren Layouts arbeiten müssen, kann eine Reihe von zusätzlichen break Eigenschaften hilfreich sein (siehe li).

Getestet mit dem neuesten Firefox, Chrome, Safari auf dem Mac.

Hinweis: Die Verwendung von flexbox würde Ihnen wahrscheinlich ein besseres Ergebnis und eine aktuellere Lösung liefern. Es lohnt sich, es zu versuchen, wenn Ihr Projekt flexbox verwenden kann.

Answer 2

Nach Can I use...

Firefox-Versionen haben 55-59 teilweise Unterstützung für diese Funktion:

Teilweise Unterstützung bezieht sich auf nicht die break-before, break-after, break-inside Eigenschaften unterstützen. WebKit- und Blink-basierte Browser haben die gleiche Unterstützung für die nicht-standardmäßigen -webkit-column-break-* Eigenschaften, um dasselbe Ergebnis zu erzielen (aber nur die Werte auto und always ). Firefox unterstützt break-* nicht.

Sie müssen ein Code-Snippet mit Ihrem Problem veröffentlichen, wenn Sie weitere Unterstützung benötigen.