Warum werden meine Flexbox-Elemente in Firefox und Chrome 48 inkonsistent gerendert?

Browserübergreifende Rendering-Probleme mit Flexbox in Firefox und Chrome 48

Hintergrund

A Durch die jüngste Aktualisierung der Flexbox-Spezifikation wurde die standardmäßige Mindestgröße für Flex-Elemente geändert, um sie an die Inhaltsgröße anzupassen. Während Chrome 47 diese Änderung korrekt implementierte, traten bei Chrome 48 und Firefox Probleme mit der Darstellung von Flexbox-Elementen auf.

Problem

In Firefox treten bei bestimmten Flexbox-Elementen überfüllte Inhalte auf sich unerwartet verhalten. Während Chrome 47 diese Elemente korrekt gerendert hat, entspricht Chrome 48 jetzt dem Verhalten von Firefox.

Lösung

Um dieses Problem zu beheben, können Sie die standardmäßige Mindestgröße dieser Elemente explizit überschreiben unter Verwendung der folgenden CSS-Eigenschaften:

.content {
    min-width: 0;
    min-height: 0;
}

Dadurch wird sichergestellt, dass die Flexbox-Elemente korrekt verkleinert werden können, um sie an ihren Inhalt anzupassen, wodurch das Rendering aufgelöst wird Probleme.

Details aus der Spezifikation

In der Flexbox-Spezifikation heißt es:

"Um eine angemessenere Standard-Mindestgröße für Flex-Elemente bereitzustellen, führt diese Spezifikation ein ein neuer automatischer Wert als Anfangswert der in CSS definierten Eigenschaften „min-width“ und „min-height“. 2.1.“

Auswirkungen auf Chrome 48

Beobachtungen zufolge emulierte die erste Implementierung des Flexbox-Updates in Chrome 48 das Verhalten von Firefox und verursachte ähnliche Rendering-Probleme. Nachfolgende Berichte weisen jedoch darauf hin, dass Chrome 48 sein Rendering-Verhalten aktualisiert hat, um der oben bereitgestellten Lösung zu entsprechen.

Fazit

Durch explizites Festlegen der Mindestgröße von Flex-Elementen auf 0 In beide Richtungen können Sie die Rendering-Probleme, die in Firefox und Chrome 48 beim Umgang mit überlaufenden Inhalten auftreten, effektiv lösen.

Das obige ist der detaillierte Inhalt vonWarum werden meine Flexbox-Elemente in Firefox und Chrome 48 inkonsistent gerendert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!