如何在不犧牲跨瀏覽器相容性的情況下在 IE9 中實作 Flexbox？

IE9 Flexbox 替代方案

對於最初在Chrome 中開發並旨在支援IE 的網站，在IE9 中解決Flexbox 實施帶來了挑戰。雖然 IE11 和 Chrome 支援 Flexbox，但 IE9 不支援。為了避免特定於瀏覽器的樣式表，需要替代方法。

Modernizr 作為偵測工具

Modernizr 偵測瀏覽器功能，包括 Flexbox 支援。它根據檢測結果向 HTML 元素添加類，例如 flexbox、no-flexbox 和 flexbox-legacy。這允許應用後備樣式：

<code class="css">.container {
  display: flex;
}
.no-flexbox .container {
  display: table-cell;
}</code>

後備技術

Zoe Gillenwater 的演示提供了有關 IE9 的 Flexbox 後備的寶貴見解：

• 水平導航間距：
利用顯示：inline-block;
• 固定元素：
使用顯示：table-cell;
• 表單對齊：
考慮使用後備方法，例如基於表格的佈局；
• Flex 順序：
明智地應用顯示屬性，同時考慮啟用 Flexbox 和非 Flexbox 的瀏覽器。

• 瀏覽器支援：
IE10 提供更好的 Flexbox 支援（根據 caniuse.com）。
• 前綴：
Autoprefixer 可以簡化跨瀏覽器相容性。
• 回退優點：
Flexbox 回退允許向後相容，而不影響設計原則。

以上是如何在不犧牲跨瀏覽器相容性的情況下在 IE9 中實作 Flexbox？的詳細內容。更多資訊請關注PHP中文網其他相關文章！