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

.flex{
  display:table;
  display:flex;

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

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

如果你关心与旧浏览器的交叉兼容性,你应该*,显示：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％). UCMini也可能需要-moz-box,它基于较旧的Firefox(但使用数据和行踪是公开未知的).

对于flex项目表格单元格或表格行后退.它变得棘手,特别是对于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)其他no-JS方式使用CSS hacks.显示值将被其他浏览器忽略,并且仅由IE8-9解析和应用.

有：a)

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

和/或：
b)

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