Internet Explorer 11 中的 Flexbox 相容性之謎
當您深入研究 CSS Flexbox 領域時,支援情況可能有點難以預測。雖然主流瀏覽器通常都能搭配使用,但 Internet Explorer 11 (IE11) 提出了一些獨特的挑戰。
IE11 和黏性頁腳難題
來自「的「黏性頁腳」範例由 Flexbox 解決」在 IE11 中失敗。一個神秘的解決方案是在 上撒上 display:flex 。
上的標籤和寬度:100%標籤。這根魔杖背後的邏輯植根於 IE11 的 flex 屬性的非標準預設值。雖然其他瀏覽器遵守草案規範的 0 1 auto,但 IE11 堅持 0 0 auto。透過明確設定這些值(例如,flex: 1 0 0),您可以引導 IE11 更好地對齊。馴服IE11 中的媒體物件
「媒體」 Object」範例也對IE11 提出了挑戰。不幸的是,似乎不存在普遍清潔的解決方案。您可能會透過特定於瀏覽器的hack 取得一些成功,例如:
@-moz-document url-prefix() { #flexible-content { flex: 1; } }
此hack以Mozilla 為目標並覆蓋flex 屬性,恢復所需的行為。發展,瀏覽器不一致是常見問題。
以上是如何讓 Flexbox 跨瀏覽器(尤其是 Internet Explorer 11)一致運作?的詳細內容。更多資訊請關注PHP中文網其他相關文章!