Warum funktioniert „display: flex' nicht bei „Elementen'?

Warum sich das Fieldset-Element nicht wie ein Flex-Container verhält

Ein Fieldset-Element mit display: flex oder display: inline-flex gestalten Möglicherweise kratzen Sie sich am Kopf, da es sich anders verhält als erwartet. Anstatt als flexibler Container zu fungieren, verhält es sich ähnlich wie Block- bzw. Inline-Block-Elemente.

Fehler oder erwartetes Verhalten?

Dieses Verhalten in Firefox und Chrome (obwohl es überraschenderweise im IE funktioniert) ist kein Fehler. Laut Fehler 984869 werden Schaltflächenelemente mit einer speziellen Behandlung gerendert und ignorieren möglicherweise CSS-Eigenschaften wie die Anzeige. Dieses Verhalten gilt nicht nur für Schaltflächen. Fieldset-, Table- und Del-Elemente weisen ebenfalls ähnliche Rendering-Anomalien auf.

Die Lösung

Um die untergeordneten Elemente eines Fieldset-Elements zuverlässig anzuordnen, wie im CSS Flexible Box Layout angegeben , müssen Sie eine Problemumgehung verwenden: Wickeln Sie Ihre untergeordneten Elemente in einen div-Container innerhalb des Feldsatzes ein. Dieser Ansatz funktioniert konsistent in allen Browsern und stellt in allen Fällen das gewünschte Layout sicher.

Firefox 46 und darüber hinaus

Es gibt jedoch gute Nachrichten für Firefox-Benutzer: Firefox 46 und höher Implementierungen unterstützen Flexbox für das Fieldset-Element (siehe Fehler 1230207). Das bedeutet, dass Sie display:flex für Feldsätze verwenden können, ohne dass Workarounds erforderlich sind.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „display: flex' nicht bei „Elementen'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!