flexbox后备以在较旧的浏览器中显示表

长答案很复杂。好消息是IE10和当今使用的大多数较旧的浏览器都支持flexbox。但是旧的语法具有完全不同的规范和行为。请参见flexbox支持表。我还建议您通过启用“生成旧版Flexbox样式”复选框来查看和/或使用此工具，以了解所涉及的内容。它将为您提供相当交叉兼容的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规格和支持之间的主要功能差异是缺少flex-wrap。因此，除了许多[“ flexbugs”]（https://github.com/philipwalton/flexbugs）和需要注意的差异。请记住，如果您想在2012年浏览器或IE9之外具有广泛的向后兼容性，则不能使用flex-wrap。

*还值得注意的是，如果您的目标用户位于亚洲或非洲，则肯定需要-webkit-box适用于Android的UCBrowser的模型，该模型目前仍不支持新语法。（截至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）另一种无JavaScript的方式是使用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; }
}