為什麼 IE11 會將絕對定位的 Flex 項目視為流內元素？

IE11 中絕對定位的Flex Item 與正常流程的交互

容器包含多個div 的情況，其中一個是絕對定位的作為背景，與Chrome 或Firefox 等其他瀏覽器相比，IE11 表現出了非常規的行為。雖然絕對定位的 div 已從正常流中正確刪除，但 IE11 將其視為流內 Flex 項目，導致 div 之間出現意外的空間分佈。

問題根源

問題的癥結在於IE11違反了flexbox規範。根據規範，絕對定位的 Flex 子項應從 Flex 佈局中排除，並且不會參與間距計算。

解決方法

幾個解決方法可以緩解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遵守Flexbox 規範的過時解釋。透過採用其中一種解決方法，開發人員可以確保在處理絕對定位的彈性項目時跨瀏覽器的行為一致。

以上是為什麼 IE11 會將絕對定位的 Flex 項目視為流內元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！