CSS Flexbox 浏览器兼容性问题

Question

我一直在使用 CSS3 的 Flexbox 布局来安排网站上的组件。在大多数情况下，一切都按预期进行得很好。然而，在旧 iPad（运行 iOS 版本 9.3.5（不知道在哪里可以找到 Safari 版本）和三星 Edge 6 'Internet' 应用程序，我发现了一些问题。内容将完全加载，页脚也是如此，但不是内容在顶部加载，页脚在下面，页脚似乎随机加载在内容之上（当我说在顶部时，我不是说在浏览器顶部）。

我已经在最新版本的 Google Chrome 和 Microsoft Edge 以及 iPhone 5 的移动版 Safari、iPhone 6 的移动版上测试了该网站Safari 和 Samsung Edge 6 的手机 Google Chrome；一切都按预期进行。

我按照 this 教程 (Flexbox) 安排组件。

这是我的代码（包括 webkit 等，我认为会增加兼容性）：

html {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    min-height: 100%;
}

.content {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

footer {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}

我在"order"里也加了属性看有没有影响，还是没有。

所以我想知道的是，有解决办法吗？或者，如果不是，我应该怎么做才能让不太现代的浏览器接受后备？

谢谢，

马修

Answer 1

如果你想看看合适的后备方法，我会考虑：

display: inline-block;
vertical-align: top;

或者如果你想更深入，你可以使用table方法。

父元素：

display: table;

子元素：

display: table-cell;

显然，因为您希望 flex 成为元素的显示，而 css 是级联的，您可以应用 display: table; 到不影响较新浏览器的元素：

.myElement{
   display:table; // Work on older - none support.
   display: flex; // Work on newer browsers. 
}

正如@Baruch 在评论中指出的，浏览器支持就是一切，不幸的是，旧版浏览器不喜欢 flex。

我还会考虑特定浏览器的用户数量，例如有多少人实际使用三星浏览器？使用 http://gs.statcounter.com/ 将是一个很大的帮助，如果用户基数低并且项目没有分配足够的预算，请放弃支持。

或者允许优雅降级 - 页面永远不会在每个浏览器中看起来都一样（这是不可能的）但是，如果页面可用并且用户可以获得信息，那么问题是什么？

希望对您有所帮助。

CSS Flexbox 浏览器兼容性问题

CSS Flexbox Browser Compatibility Issues

html

javascript

css

frontend

flexbox