絶対配置されたフレックス項目が IE11 の通常フローから削除されないのはなぜですか?

絶対に配置されたフレックス項目を IE11 の通常フローから削除できません

問題:

コンテンツを含む 2 つの div と、背景の絶対位置を含む 3 番目の div にあります。この場合、コンテナーはフレックスボックスです。これは Chrome と Safari の両方で正常に機能しますが、Firefox と IE11 では、絶対位置の div が考慮され、あたかも 3 行に 3 つの div があるかのように div 間のスペースが分散されます。

分析:

Firefox は、絶対に配置された 3 番目の div をフロー内フレックス項目として扱い、スペース間の計算で考慮します。 (IE11 についても同様です。Chrome と Edge はこれを無視します。)

明らかに、これは現在のフレックスボックス仕様と矛盾しています:

4.1. 绝对定位的弹性项

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

回避策:

• 絶対位置を移動div

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

• CSS グリッド レイアウトを使用します

CSS グリッド レイアウトは絶対位置の要素を考慮しないため、この問題は解決できます。

注:

Firefox の場合、この問題は v52 で解決されています。ただし、IE11 では依然としてこの問題が発生します。

以上が絶対配置されたフレックス項目が IE11 の通常フローから削除されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。