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

Question

有没有比下面更好的方法来确保我只针对不支持flexbox的浏览器.我认为这可行,但也许我只需要ie8和9的一些样式,例如也可能影响现代浏览器.最好是一起创建一个单独的样式表吗？

.flex{
  display:table;
  display:flex;

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

谢谢!

Answer 1

答案很长很复杂.好消息是IE10和今天使用的大多数旧浏览器都支持flexbox.但是旧的语法具有完全不同的规范和行为.请参阅flexbox支持表.我还建议您查看和/或使用此工具并启用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规范和支持之间的主要特征差异是缺乏flex-wrap.所以除了许多["flexbugs"](https://github.com/philipwalton/flexbugs)和值得关注的差异.请记住,如果您想要在2012浏览器或IE9之外进行广泛的向后兼容,则无法使用flex-wrap.

*值得注意的是,如果您的目标用户位于亚洲或非洲,您肯定需要-webkit-box适用于Android的UCBrowser模型,目前仍然不支持新语法.(截至2016年,UCBrowser在全球移动浏览器使用率超过10%,在亚洲占25%).-moz-boxUCMini可能也需要基于较旧的Firefox(但使用数据和行踪是公开未知的).

对于弹性项目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)其他no-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; }
}