Flexbox无法在iPad和Safari上工作

问题描述：

我在网站上使用flexbox，并在iPad Air，iPad 3和Safari PC上崩溃。Flexbox无法在iPad和Safari上工作

设计和代码与此codepen相似。 http://codepen.io/anon/pen/xwJzEg/

display: flex; 
flex-wrap: wrap;

这是它的外观发生问题在这些设备上：

任何意见，如何解决这个？

答

您可能需要考虑Safari浏览器对flexbox的支持。

尽管Safari 9支持所有标准的flex属性，但对于Safari 8及更高版本，您需要使用供应商前缀。

做此调整来代码：

.container { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: -webkit-flex; /* NEW */ 
    display: flex; 
    -webkit-flex-wrap: wrap; /* NEW */ 
    flex-wrap: wrap; 
    font-family: "Open Sans"; 
}

见Flexbox的浏览器支持浏览：http://caniuse.com/#search=flexbox

考虑使用Autoprefixer。

见Flexbox的代码样本前缀：The Ultimate Flexbox Cheat Sheet

我最大的问题是最新的浏览器（Chrome和Safari）上的Ipad 3和Ipad Air – Chriss

究竟发生了什么？你能发布一个问题的图像或更多的细节？ –

在问题中张贴截图。 – Chriss

答

您是否尝试过的第一个孩子和最后子li元素设置弹性值？我发现如果没有Flex容器中的flex-items具有flex值，那么iPad可能会感到困惑。例如：

.container li:first-child { 
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1; 
} 
.container li:nth-child(4) { 
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1; 
}

答

我按照答案中的建议使用了Autoprefixer。

我在编写SASS时使用gulp来处理这个问题。这是一个guide。

这里的答案建议在没有前缀的前面使用前缀属性。我同意一个小小的更正。

.container { 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    display: flex; 
    flex-wrap: wrap; 
}

理想情况下，你需要列出所有的前缀属性你开始使用非前缀的问题之前。 @Michael_B答案在我看来并不完美。

我希望人们会觉得这很有用。

Flexbox无法在iPad和Safari上工作

相关推荐