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

Question

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

.flex{
  display:table;
  display:flex;

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

谢谢!

Answer 1

长答案很复杂。好消息是 IE10 和当今使用的大多数旧浏览器都支持 flexbox。但是旧语法具有完全不同的规范和行为。见 flexbox support table 。我还建议您查看和/或使用此 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 ) 和需要注意的差异。请记住，您 不能使用 flex-wrap如果您想要超越 2012 浏览器或 IE9 的广泛向后兼容性。

*另外值得注意的是，如果您的目标用户在亚洲或非洲，您肯定需要-webkit-box UCBrowser for Android 的模型，目前仍不支持新语法。 (截至 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 解析和应用。

与:一)

.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; }
}