Wie kann ich die FF 33.x Flexbox-Kompatibilität in FF 34.x und höher aufrechterhalten?

Erreichen der FF 33.x Flexbox-Kompatibilität in FF 34.x

In Firefox 34.x wurde das Flexbox-Verhalten geändert. Dies hat dazu geführt, dass einige zuvor funktionale Layouts nicht mehr funktionieren.

Das Problem der impliziten Mindestgröße

Die primäre Diskrepanz zwischen FF 33.x- und 34.x-Flexbox-Implementierungen dreht sich um implizite Mindestgröße für Flex-Artikel. In FF 34.x wurde diese Funktion wieder eingeführt und wirkt sich auf das Layoutverhalten aus.

Neuerstellung des FF 33.x-Verhaltens

Um das FF 33.x-Verhalten in FF wiederherzustellen 34.x oder 35.x, wenden Sie diese CSS-Regel an:

* { min-height:0 }

Dies Die Regel setzt die Mindesthöhe allgemein auf Null und überschreibt das neue Standardverhalten.

Gezielte Anwendung

Während die obige Regel eine einfache Lösung ist, sollte min-height:0 dies tun Idealerweise sollte es nur auf bestimmte Elemente angewendet werden, die es benötigen. Insbesondere muss diese Regel auf jedes Element angewendet werden, das:

• ein untergeordnetes Element eines spaltenorientierten Flex-Containers ist
• einen großen Nachkommen enthält, der überlaufen darf

Beispiel

Zum Beispiel in der mitgelieferten Geige (http://jsfiddle.net/yoL2otcr/1/), min-height:0 wurde angewendet, um das Überlaufproblem zu beheben.

Weitere Informationen

Für Weitere Informationen und Beispiele zu dieser spezifischen Änderung der Flexbox-Spezifikation finden Sie im Mozilla-Bugtracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

Das obige ist der detaillierte Inhalt vonWie kann ich die FF 33.x Flexbox-Kompatibilität in FF 34.x und höher aufrechterhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!