ホームページ > ウェブフロントエンド > CSSチュートリアル > 絶対配置されたフレックス項目が IE11 の通常フローから削除されないのはなぜですか?

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

DDD
リリース: 2024-12-24 13:09:10
オリジナル
112 人が閲覧しました

Why Are Absolutely Positioned Flex Items Not Removed From the Normal Flow in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート