首頁 > web前端 > css教學 > 如何在更高版本中複製 Firefox 33.x Flexbox 行為?

如何在更高版本中複製 Firefox 33.x Flexbox 行為?

Linda Hamilton
發布: 2024-12-31 09:42:29
原創
1001 人瀏覽過

How Can I Replicate Firefox 33.x Flexbox Behavior in Later Versions?

在FF 34.x 及更高版本中複製FF 33.x Flexbox 行為

Firefox 34 及更高版本中的Flexbox實作引入了一項新功能稱為「彈性項目的隱含最小尺寸」。此變更會導致 Flexbox 容器中的元素超出視窗,從而破壞先前的佈局。桌面應用程式依賴 Flexbox 的使用者可能會遇到這個問題。

要恢復原始 FF 33.x 的行為,可以加入一個簡單的樣式規則: * { min-height: 0; }。此行將所有元素的最小高度設為零,防止它們超過其容器的高度。

但是,在某些情況下,可能需要僅將 min-height:0 套用於特定元素。這適用於以下元素:

  • 是垂直彈性盒容器的子元素
  • 包含旨在溢出的高後代

在最初的問題中,佈局問題是由嵌套在多個Flex 容器中的高元素引起的。若要解決此問題,應為巢狀鏈上的所有元素設定 min-height:0。

請注意,此規範變更導致網路上廣泛的佈局中斷。錯誤報告提供了更多詳細資訊和範例:https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

以上是如何在更高版本中複製 Firefox 33.x Flexbox 行為?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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