IE9 的 Flexbox 替代方案

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

考慮 IE10 的以下實作：

div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}

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

.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}

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

• 使用Flexbox 升級：

  • 水平導航間距：顯示：內嵌- block;
  • 在沒有Flexbox 的情況下固定元素：顯示：表格單元格；
  • 對齊表單回退
  • 有和沒有Flex 順序的範例

• CSS3 佈局：

  • 在Flexbox 中使用inline-block：水平形式
  • 在Flexbox 中使用inline-block：水平導航

記住：

• 瀏覽器對IE10 的支援是可靠的。
• Autoprefixer 處理瀏覽器前綴。
• Modernizr 提供後備。
• Flexbox 的採用並不是排他性的。