為什麼絕對定位的 Flex 項目沒有從 IE11 的正常流程中刪除？

在IE11 絕對定位的彈性項無法移除在兩個帶有內容的div 和一個帶有絕對位置的背景第三個div的情況下，容器是一個 flexbox。這在 Chrome 和 Safari 中都可以正常工作，但 Firefox 和 IE11 將絕對定位的 div 考慮在內，並在 div 之間分配空間，就像有三行中的三個 div 一樣。

分析：

Firefox 將絕對定位的第三個 div 視為流內彈性項，並將其考慮入 space-between 計算中。 （IE11 也是如此；Chrome 和Edge 會忽略它。）

顯然，這與當前flexbox 規範不符：

解決方法：

4.1. 绝对定位的弹性项

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

移動絕對定位的div

• 使用CSS Grid 版面

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

CSS Grid 佈局不考慮絕對定位的元素，因此它可以解決此問題。

• 注意：

對於 Firefox，此問題已在 v52 中解決。但是，IE11 仍然存在這個問題。

以上是為什麼絕對定位的 Flex 項目沒有從 IE11 的正常流程中刪除？的詳細內容。更多資訊請關注PHP中文網其他相關文章！