flexbox 回退到在旧浏览器中显示表格答案

【问题标题】：flexbox fallback to display table in older browsersflexbox 回退到在旧浏览器中显示表格
【发布时间】：2016-05-06 09:46:24
【问题描述】：

有没有比下面更好的方法来确保我只针对不支持 flexbox 的浏览器。我认为这可以工作，但也许我需要一些仅适用于 ie8 和 9 的样式，例如这可能也会影响现代浏览器。最好完全创建一个单独的样式表吗？

.flex{
  display:table;
  display:flex;

  .column{
    display:table-cell;
    display: inline-block;
  }
}

谢谢！

【问题讨论】：

所有现代浏览器都支持 flexbox，除了 IE source)。如果您想要 IE8 和 9 的后备 HTML，请尝试 IE conditional comments。

标签： flexbox

【解决方案1】：

答案很复杂。好消息是 IE10 和当今使用的大多数旧浏览器都支持 flexbox。但是旧语法具有完全不同的规范和行为。请参阅flexbox support 表。我还建议您查看和/或使用此 tool 并启用 Generate legacy flexbox styles 复选框以了解所涉及的内容。它会给你一个相当交叉兼容的 CSS 语法来使用。

如果您应该关心与旧版浏览器的交叉兼容性*，则不建议单独使用display:flex;。您需要添加那些旧的 flexbox 前缀。至于 IE8 和 9，如果必须，您可以使用确实针对 IE8 桌面浏览器的表后备。这涉及到以下规则集：

.flex-container {
  display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

请注意新旧 flexbox 规范与 support 之间的主要功能差异是缺少 flex-wrap。因此，除了许多 ["flexbugs"] (https://github.com/philipwalton/flexbugs) 和需要注意的差异之外。请记住，如果您希望在 2012 浏览器或 IE9 之外获得广泛的向后兼容性，则不能使用 flex-wrap。

*另外值得注意的是，如果您的目标用户在亚洲或非洲，您肯定需要 Android UCBrowser 的-webkit-box 模型，该模型目前仍不支持新语法。（截至 2016 年，UCBrowser 在全球的移动浏览器使用量超过 10%，在亚洲占 25%）。 -moz-box 可以说也是基于旧版 Firefox 的 UCMini 所需要的（但使用数据和下落是公开的未知）。

对于弹性项目table-cell 或table-row 后备。它变得很棘手，尤其是 flexbox 嵌套。

但是，有 3 个选项可用：

1) 使用像Modernizr 这样的脚本进行特征检测。并使用 Modernizr CSS 文档样式通过 JS 特征检测声明 IE8-9 回退规则。像这样：

html.no-flexbox .flex-item {
  display: table-cell;
}

2) 使用 IE CSS 条件样式：

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->

或

3) 另一种无 JS 方式是使用CSS hacks。具有其他浏览器会忽略的显示值，仅由 IE8-9 解析和应用。

与：a)

.flex-item {
  display: block;
  display: table-cell\0/; /*IE8-10 */
}

和/或： b)

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex-item { display: table-cell; }
}

【讨论】：