為什麼 IE11 在佈局計算中包含絕對定位的 Flex 項目？

IE11 中Flow 中考慮的絕對定位Flex 項目

問題

在具有兩個內容填充div 和一個絕對定位背景div 的Flexbox容器中，IE11（以及版本52 之前的Firefox）在計算空間分佈時會考慮絕對定位的div。此行為偏離了 Flexbox 規範，該規範規定絕對定位的項目不參與 Flex 佈局。

解決方法

重新定位絕對定位的Div

一個可能的解決方案是在其他兩個div ，如圖下方：

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

使用Flex Wrap

另一種解決方法是使用 Flex Wrap 強制絕對定位的項目換行。這可以防止它影響其他項目的空間分佈：

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

在Firefox 中（直到v52）：覆蓋預設行為

對於Firefox（之前的版本） 52)，此CSS 屬性可用於覆寫預設行為並從流中刪除絕對定位的div：

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

以上是為什麼 IE11 在佈局計算中包含絕對定位的 Flex 項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！