Warum berücksichtigt IE11 absolut positionierte Flex-Elemente in Layoutberechnungen?

Absolut positioniertes Flex-Element, das in Flow in IE11 berücksichtigt wird

Problem

In einem Flexbox-Container mit zwei inhaltsgefüllten Divs und einem absolut positionierten Hintergrund-Div , IE11 (und Firefox vor Version 52) berücksichtigt bei der Berechnung der Raumverteilung das absolut positionierte Div. Dieses Verhalten weicht von der Flexbox-Spezifikation ab, die besagt, dass absolut positionierte Elemente nicht am Flex-Layout teilnehmen.

Problemumgehungen

Absolut positionierte Div verschieben

Eine mögliche Lösung besteht darin, das absolut positionierte Div zwischen den anderen beiden Divs zu verschieben, wie dargestellt unten:

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

Verwenden Sie Flex Wrap

Eine weitere Problemumgehung besteht darin, Flex Wrap zu verwenden, um zu erzwingen, dass das absolut positionierte Element in eine neue Zeile umgebrochen wird. Dadurch wird verhindert, dass es die Speicherplatzverteilung der anderen Elemente beeinflusst:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

In Firefox (bis v52): Standardverhalten überschreiben

Für Firefox (vor Version 52) kann diese CSS-Eigenschaft verwendet werden, um das Standardverhalten zu überschreiben und das absolut positionierte Div aus dem Fluss zu entfernen:

.container {
    display: -moz-box;  /* Firefox specific property */
    -moz-box-orient: horizontal;  /* Firefox specific property */
}

Das obige ist der detaillierte Inhalt vonWarum berücksichtigt IE11 absolut positionierte Flex-Elemente in Layoutberechnungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!