CSS Flexbox浏览器兼容性问题

Question

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

我已经在最新版本的谷歌Chrome和微软Edge上测试了该网站，也在iPhone 5的移动Safari、iPhone 6的移动Safari和三星Edge 6的移动谷歌Chrome上测试了它；一切如预期。

我遵循了本教程(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;
}

我还添加了"订单"属性，看看它是否有任何影响，但仍然没有。

所以我想知道的是，有解决方案吗？或者，如果没有，我应该做什么作为不太现代的浏览器的可接受的后备措施？

谢谢，

Matthew

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/这将是一个很大的帮助，如果用户基础很低，项目在预算中没有分配足够的资金，那么就放弃支持。

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

希望这能有所帮助。