flexbox 回退以在旧浏览器中显示表格 [英] flexbox fallback to display table in older browsers

问题描述

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

Is there a better way than below to ensure that I only target browsers that don't support flexbox. I think this could work, but maybe I'll need some styles only for ie8 and 9 for example that might affect modern browsers too. Would it be best to create a separate stylesheet altogether?

.flex{
  display:table;
  display:flex;

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

谢谢！

推荐答案

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

The long answer is complicated. The good thing is that IE10 and most older browsers in use today, support flexbox. But an old syntax with a quite different spec and behavior. See flexbox support table. I also suggest you have a look and/or use this tool with the Generate legacy flexbox styles checkbox enabled to get an idea of what's involved. It will give you a fairly cross compatible CSS syntax to use.

如果您关心与旧浏览器的交叉兼容性，那么不推荐单独使用 display:flex;.您需要添加那些旧的 flexbox 前缀.对于 IE8 和 9，如果必须，您可以使用确实针对 IE8 桌面浏览器的表回退.其中涉及到以下规则集:

If you care about cross-compatiblity with older browsers as you should*, display:flex; alone is not recommended. You need to add those old flexbox prefixes. As for IE8 and 9, you can use a table fallback indeed targeting IE8 desktop browsers if you must. Which comes to the following rule set:

.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-包装.所以除了许多 ["flexbugs"] (https://github.com/philipwalton/flexbugs)以及需要注意的差异.请记住，如果您希望在 2012 年浏览器或 IE9 以外的情况下具有广泛的向后兼容性，则不能使用 flex-wrap.

Noting that the main feature differences between new and old flexbox spec and support is the lack of flex-wrap. So besides the many ["flexbugs"] (https://github.com/philipwalton/flexbugs) and differences to watch for. Keep in mind that you cannot use flex-wrap if you want extensive backward compatibility beyond 2012 browsers or IE9.

*另外值得注意的是，如果你的目标用户在亚洲或非洲，你肯定需要安卓版UCBrowser的-webkit-box模型，目前尚不支持新语法.(截至 2016 年，UCBrowser 占全球移动浏览器使用量的 10% 以上，亚洲占 25%).-moz-box 可以说是基于旧版 Firefox 的 UCMini 也需要的(但是使用数据和下落是公开的未知).

*It's also worth noting that if your target users are in Asia or Africa, you will definitely need the -webkit-box model for the UCBrowser for Android, which currently still doesn't support the new syntax. (As of 2016, UCBrowser has over 10% of mobile browser usage worldwide and 25% in Asia). -moz-box is arguably also needed for UCMini which is based on older Firefox (usage data and whereabouts is publicly unknown however).

对于弹性项目 table-cell 或 table-row 回退.它变得棘手，尤其是使用 flexbox 嵌套时.

For the flex items table-cell or table-row fallbacks. It gets tricky, especially with flexbox nesting.

但是，有 3 个选项可用:

However, there are 3 options available:

1) 使用类似 Modernizr 的脚本进行特征检测.并使用 Modernizr CSS 文档样式通过 JS 功能检测来声明 IE8-9 回退规则.像这样:

1) Use feature detection with a script like Modernizr. And use the Modernizr CSS document styling to declare the IE8-9 fallback rules via JS feature detection. Like this:

html.no-flexbox .flex-item {
  display: table-cell;
}

2) 使用 IE CSS 条件样式:

2) Use IE CSS conditional styling:

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->

或

3) 另一种无 JS 方法是使用 CSS hacks.带有其他浏览器会忽略的显示值，只能被IE8-9解析和应用.

3) The other no-JS way is using CSS hacks. With a display value which will ignored by other browsers, and only be parsed and applied by 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; }
}

这篇关于flexbox 回退以在旧浏览器中显示表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！