Question

我一直在利用CSS3的Flexbox布局来安排网站上的组件。在大多数情况下，一切都运作良好，如预期的那样。然而，在旧iPad上测试网站（运行iOS版本9.3.5（不知道在哪里可以找到Safari版本）），以及在三星Edge 6的互联网＆＃39;申请时，我发现了一些问题。内容将完全加载，页脚也会加载，但是页脚顶部下方的内容不是加载到内部，而是在内容的顶部随机加载（当我说在顶部时，我不会这样做）意味着在浏览器的顶部。）

我在最新版本的Google Chrome和Microsoft Edge以及iPhone 5的Mobile Safari，iPhone 6的Mobile Safari和Samsung Edge 6上测试了该网站。移动谷歌浏览器;一切都按预期工作。

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

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

input{
  
  vertical-align:bottom;
  }

我还在＆＃34;命令＆＃34;中添加了财产，看它是否有任何影响，但仍然没有。

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

谢谢，

马修

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/将是一个很大的帮助，如果用户群较低且项目在预算中没有足够的分配，则放弃支持。

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

希望这有帮助。

CSS Flexbox浏览器兼容性问题

1 个答案: