我一直在使用 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”属性,看看它是否有任何影响,但仍然没有。
所以我想知道的是,有解决办法吗?或者,如果不是,我应该怎么做才能让不太现代的浏览器接受后备?
谢谢,
马修
最佳答案
如果你想看看合适的回退方法,我会考虑:
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/将是一个很大的帮助,如果用户群很低并且元素没有分配足够的预算,请放弃支持。
或者允许优雅降级 - 页面永远不会在每个浏览器中看起来都一样(这是不可能的)但是,如果页面可用并且用户可以获得信息,那么问题是什么?
希望这对您有所帮助。
关于javascript - CSS Flexbox 浏览器兼容性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41444313/