首頁 > web前端 > css教學 > 為什麼 IE11 在佈局計算中包含絕對定位的 Flex 項目?

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

Mary-Kate Olsen
發布: 2024-12-21 08:03:10
原創
295 人瀏覽過

Why Does IE11 Include Absolutely Positioned Flex Items in Layout Calculations?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板