如何讓 Flexbox 跨瀏覽器（尤其是 Internet Explorer 11）一致運作？-css教學-PHP中文網

如何讓 Flexbox 跨瀏覽器（尤其是 Internet Explorer 11）一致運作？

Susan Sarandon

發布： 2024-11-28 20:11:12

原創

705 人瀏覽過

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