Warum werden absolut positionierte Flex-Elemente nicht aus dem normalen Fluss in IE11 entfernt?

Absolut positionierte Flex-Elemente können in IE11 nicht aus dem normalen Fluss entfernt werden

Problem:

In zwei Divs mit Inhalt und einem dritten Div mit absoluter Position im Hintergrund In diesem Fall handelt es sich bei dem Container um eine Flexbox. Dies funktioniert sowohl in Chrome als auch in Safari gut, aber Firefox und IE11 berücksichtigen das absolut positionierte Div und verteilen den Abstand zwischen den Divs so, als ob es drei Divs in drei Zeilen gäbe.

Analyse:

Firefox behandelt das absolut positionierte dritte Div als In-Flow-Flex-Element und berücksichtigt es bei der Abstandsberechnung. (Gleiches gilt für IE11; Chrome und Edge ignorieren es.)

Offensichtlich steht dies im Widerspruch zur aktuellen Flexbox-Spezifikation:

4.1. 绝对定位的弹性项

由于它不在流中，一个 flex 容器的绝对定位从属项不会参与 flex 布局。

Problemumgehung:

• Absolute Positionierung verschieben div

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

• CSS-Rasterlayout verwenden

Das CSS-Rasterlayout berücksichtigt keine absolut positionierten Elemente Dieses Problem kann gelöst werden.

Hinweis:

Für Firefox wurde dieses Problem in Version 52 behoben. Allerdings besteht dieses Problem bei IE11 immer noch.

Das obige ist der detaillierte Inhalt vonWarum werden absolut positionierte Flex-Elemente nicht aus dem normalen Fluss in IE11 entfernt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!