Warum behandelt IE11 absolut positionierte Flex-Elemente als In-Flow-Elemente?

Interaktion eines absolut positionierten Flex-Elements mit dem normalen Fluss in IE11

In einer Situation, in der ein Container mehrere Divs enthält, von denen eines absolut positioniert ist Hintergrund: IE11 zeigt im Vergleich zu anderen Browsern wie Chrome oder Firefox ein unkonventionelles Verhalten. Während das absolut positionierte Div ordnungsgemäß aus dem normalen Fluss entfernt wird, behandelt IE11 es als ein Zufluss-Flex-Element, was zu einer unerwarteten Raumverteilung zwischen den Divs führt.

Wurzel des Problems

Der Kern des Problems liegt in der Verletzung der Flexbox-Spezifikation durch IE11. Gemäß der Spezifikation sollten absolut positionierte Flex-Kinder vom Flex-Layout ausgeschlossen werden und nicht zur Abstandsberechnung beitragen.

Problemumgehungen

Mehrere Problemumgehungen können dieses Problem in IE11 lindern :

Neupositionierung des Hintergrunds Div

Anstatt das absolut positionierte Hintergrund-Div nach den anderen Divs zu platzieren, verschieben Sie es an eine Position zwischen ihnen und erstellen Sie so eine Struktur wie:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

Zusammenfassung

Die Nichtübereinstimmung im Verhalten zwischen IE11 und kompatiblen Browsern ergibt sich aus der Einhaltung von IE11 veraltete Interpretation der Flexbox-Spezifikation. Durch den Einsatz einer der Problemumgehungen können Entwickler beim Umgang mit absolut positionierten Flex-Elementen ein konsistentes Verhalten in allen Browsern sicherstellen.

Das obige ist der detaillierte Inhalt vonWarum behandelt IE11 absolut positionierte Flex-Elemente als In-Flow-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!