CSS Flexbox 浏览器兼容性问题

Question

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

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

我按照this 教程（Flexbox）来安排组件。

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

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;

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

父元素：

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/ 会有很大帮助，如果用户基数较低且项目没有在预算中分配足够的资金，请放弃支持。

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

希望这会有所帮助。