如何為 IE9 及更高版本實作 Flexbox？

IE9 的 Flexbox 替代品

現代瀏覽器提供了 Flexbox CSS 模型，提供了一種有效的方式來分佈和對齊元素。但是，IE9 缺乏 Flexbox 支援。

考慮 IE10 的以下實作：

<code class="css">div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}</code>

要解決 IE9 中缺少 Flexbox 的問題，請考慮合併 Modernizr，這是一個偵測 Flexbox 功能的 JavaScript 函式庫。使用 Modernizr，您可以根據需要新增後備樣式。例如：

<code class="css">.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}</code>

請參閱Zoe Gillenwater 的演示以獲取進一步指導：

• 使用Flexbox 升級：

  • 水平導航: display: inline-block;
  • 在沒有Flexbox 的情況下固定元素：display: table-cell;
  • 對齊表單回退
  • 使用和不使用Flex order的範例

• CSS3 版面：

  • 將inline-block 與Flexbox 結合使用：水平形式
  • 將inline-block 與Flexbox 結合使用：水平形式
  將inline-block與Flexbox 結合使用：水平導航

記住：
• 瀏覽器對IE10 的支援是可靠的。
• Autoprefixer 處理瀏覽器前綴。
• Modernizr 提供後備。

Flexbox 的採用並不是排他性的。

以上是如何為 IE9 及更高版本實作 Flexbox？的詳細內容。更多資訊請關注PHP中文網其他相關文章！