Question

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

.flex{
  display:table;
  display:flex;

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

谢谢！

Answer 1

答案很长很复杂。好消息是IE10和今天使用的大多数旧浏览器都支持flexbox。但是旧的语法具有完全不同的规范和行为。见flexbox support表。我还建议您查看和/或使用此tool并启用生成旧版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规范和support之间的主要功能差异是缺少flex-wrap。除了许多[＆＃34; flexbugs＆＃34;]（https://github.com/philipwalton/flexbugs）和差异之外，还需要注意。请注意，如果您希望在2012浏览器或IE9之外进行广泛的向后兼容，则无法使用flex-wrap。

*还值得注意的是，如果您的目标用户位于亚洲或非洲，您肯定需要适用于Android的UCBrowser的-webkit-box模型，目前仍然不支持新语法。（截至2016年，UCBrowser在全球移动浏览器使用率超过10％，在亚洲占25％）。 UCMini可能也需要-moz-box，它基于较旧的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]-->

OR

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

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

1 个答案: