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 的情况下固定元素：显示： table-cell;
  • 对齐表单后备
  • 有或没有弹性顺序的示例

• CSS3布局：

  • 将 inline-block 与 Flexbox 结合使用：水平形式
  • 将 inline-block 与 Flexbox 结合使用：水平导航

记住：

• 浏览器对 IE10 的支持是可靠的。
• Autoprefixer 处理浏览器前缀。
• Modernizr 提供后备方案。
• Flexbox 的采用不是 独家的。