如何为 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 结合使用：水平导航

记住：

• 浏览器对 IE10 的支持是可靠的。
• Autoprefixer 处理浏览器前缀。
• Modernizr 提供后备。
• Flexbox 的采用并不是排他性的。

以上是如何为 IE9 及更高版本实现 Flexbox？的详细内容。更多信息请关注PHP中文网其他相关文章！