首頁 > web前端 > css教學 > 如何讓 Flexbox 跨瀏覽器(尤其是 Internet Explorer 11)一致運作?

如何讓 Flexbox 跨瀏覽器(尤其是 Internet Explorer 11)一致運作?

Susan Sarandon
發布: 2024-11-28 20:11:12
原創
700 人瀏覽過

How Can I Make Flexbox Work Consistently Across Browsers, Especially Internet Explorer 11?

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

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