javascript - CSS Flexbox 浏览器兼容性问题

Question

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

我已经在最新版本的 Google Chrome 和 Microsoft Edge 以及 iPhone 5 的 Mobile Safari、iPhone 6 的 Mobile Safari 和 Samsung Edge 6 的 Mobile 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;

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

父元素:

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/将是一个很大的帮助，如果用户群很低并且元素没有分配足够的预算，请放弃支持。

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

希望这对您有所帮助。