Internet Explorer 11 和解決方案中的Flexbox 怪癖
在放棄CSS Flexbox 的「浮動」佈局時,開發人員可能會遇到到特定的挑戰Internet Explorer (IE) 11。
案例1:黏性頁腳問題
「Solved by Flexbox」中的「黏性頁腳」範例在IE 11 中出現錯誤據caniuse.com 稱, IE 10 和11 的預設Flex 值與草案規範不同。在中包含display:flex
中的寬度:100%解決了這個問題。案例2:媒體物件未對齊
垂直對齊圖像和文字的「媒體物件」範例可以在所有主流瀏覽器中運行,但不適用於IE 11 由於其對flex 屬性的處理。將 flex 調整為 1 0 0 可以解決問題,但 Firefox 可能需要有針對性的破解才能恢復最佳行為。
結論
雖然跨瀏覽器都支援 Flexbox,但存在細微差別實作中可能會在特定瀏覽器中導致意外結果。了解這些怪癖並採用適當的解決方法可確保跨平台的 Flexbox 行為保持一致。
以上是如何修復 Internet Explorer 11 中的 Flexbox 版面配置問題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!