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

絶対に配置されたフレックス項目が IE11 の通常フローのままになる

3 つの div を含むフレックスボックス レイアウトで、2 つはコンテンツを含み、1 つは絶対に配置されます背景の場合、IE11 は絶対に配置された div を通常のフローの一部として扱い、それに応じて div 間のスペースを分配します。この動作は標準とは異なるため、位置ずれが生じる可能性があります。

回避策:

Firefox は、フレックスボックスの仕様に合わせて、バージョン 52 でこの問題を解決しました。ただし、IE11 には依然として問題があります。これに対処するには:

• 絶対的に配置された項目を再配置します: 絶対的に配置された div (.bg) を最後に配置する代わりに、他の 2 つ (.c1 と .c1) の間に移動します。 .c2)。これによりフローの順序が変更され、通常のフローから絶対位置の要素が効果的に削除されます。

更新された HTML コードは次のとおりです:

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

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