如何讓 Flexbox 跨瀏覽器（包括 Internet Explorer 11）一致地運作？

Flexbox 和 Internet Explorer 11：在 中顯示：flex？

追求拋棄「浮動」佈局和擁抱 CSS Flexbox，在 Internet Explorer 11 中可能會遇到相容性問題。雖然主流瀏覽器通常都支援Flexbox，但IE11 呈現

「黏性頁腳」難題

「透過Flexbox 解決」中的「黏性頁腳」範例在IE11 中遇到了障礙。透過將 display:flex 加入到 中element 和 width:100% 到

，但問題已解決。了解此解決方法背後的基本原理至關重要。

IE10 和 IE11 中的 flex 預設值與草稿規範不同，導致在遇到像 flex:1 這樣的 CSS 聲明時出現不一致的行為。將其修改為 1 0 0 可確保跨瀏覽器的相容性。

解決「媒體物件」之謎

「媒體物件」範例在 IE11 中面臨額外的障礙。操縱 CSS 的各種嘗試都沒有成功。不幸的是，在 IE11 中實現功能的乾淨解決方案仍然難以實現。

相容性注意事項

前面提到的「黏性頁腳」範例的解決方法可能會無意中破壞 Firefox 的渲染。為了解決這個問題，請採用專門針對 Mozilla 的 hack，如下所示：

@-moz-document url-prefix() {
  #flexible-content {
    flex: 1;
  }
}

瀏覽器供應商可能會因其在 W3C 中的候選狀態而對 Flexbox 進行不同的解釋。然而，隨著標準的成熟，這種情況應該會穩定下來。任何替代解決方案將不勝感激。

以上是如何讓 Flexbox 跨瀏覽器（包括 Internet Explorer 11）一致地運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！