IE11 が絶対配置されたフレックス項目をフロー内要素として扱うのはなぜですか?

IE11 での絶対配置された Flex アイテムの通常フローとの相互作用

コンテナーに複数の div が含まれており、そのうちの 1 つが絶対配置されている状況背景として、IE11 は Chrome や Firefox などの他のブラウザーと比べて、型破りな動作を示します。絶対配置された div は通常のフローから適切に削除されますが、IE11 はそれをフロー内フレックス項目として扱うため、div 間で予期しないスペースが分散されます。

問題の根源

問題の核心は、IE11 のフレックスボックス仕様への違反にあります。仕様に従って、絶対的に配置されたフレックスの子はフレックス レイアウトから除外され、間隔の計算に影響を与えないようにする必要があります。

回避策

IE11 では、いくつかの回避策によりこの問題を軽減できます。 :

背景の位置を変更するDiv

絶対に配置された背景 div を他の div の後に配置する代わりに、それらの間の位置に移動して、次のような構造を作成します。

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

概要

IE11 と準拠ブラウザー間の動作の不一致は、IE11 のフレックスボックス仕様の時代遅れの解釈に準拠しています。回避策の 1 つを採用することで、開発者は絶対位置のフレックス項目を扱うときにブラウザ間で一貫した動作を保証できます。

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