IE 忽略Flex 容器的最小高度
在Internet Explorer 10 和11 中,Flex 容器在達到最小高度時可能會表現出意外的行為。高度屬性。雖然 Flex 容器應遵守定義的最小高度,但 IE 瀏覽器會忽略它。
為了解決此問題,有解決方法,即使 Flex 容器本身成為 Flex 專案。將以下程式碼新增至 CSS:
,您可以有效地將整個頁面轉換為 Flex 容器。這使得 Flex 容器能夠遵守 IE 中的 min-height 屬性,同時保持預期的佈局。
範例:
考慮一個具有兩個子 div 的 Flex 容器,其中容器的最小高度為 400px,子 div 不大於 400px。在 Chrome 和 Firefox 中,佈局將符合預期,一個子元素位於頂部,另一個子元素位於底部。但是,在 IE 中,容器會折疊到其內容的高度,而忽略 min-height 屬性。
解決方案:
要解決此問題,請實現解決方法是使主體成為彈性容器。修改後的程式碼如下圖所示:
以上是為什麼 IE 忽略我的 Flex 容器的「min-height」屬性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!