Flexbox未按预期在Safari上进行包装。我究竟做错了什么？

我有一个flexbox网格，它并没有包装在Safari 7上（我测试的那个）。Flexbox未按预期在Safari上进行包装。我究竟做错了什么？

这是一个简化的例子：

的Html

<ul> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> </ul>

的CSS

ul { 
    width: 100%; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: flex; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

li { 
    background:red; 
    width: 25%; 
    height: 150px; 
    list-style-type: none; 
    text-align: center; 
    margin-bottom: 4.0625rem; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: flex; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
}

这里有该代码在一个笔：

这是结果在Safari（截图马德与Browserstack）

我真的坚持了这一点。任何帮助深表感谢。

谢谢！

来源

2017-02-03 Marian Ioan

看起来不错我http://i.imgur.com/g5bvdS7.png –

我的客户是使用Safari 7，从我看到的布局非常混乱。在这一点上，我想知道如果这是一个错误，或者如果我是一个noob，并没有看到一些东西 –

您是否尝试添加'display：-webkit-flex;'到'ul'？ –

Safari 7需要-webkit flexbox属性的前缀。 http://caniuse.com/#feat=flexbox

你已经对你的uldisplay: -webkit-box;不过是另外一个自己版本的Safari可能要使用display: -webkit-flex;

来源

2017-02-04 00:07:32

是的，这是真的。我正在使用autoprefixer，并且需要照顾前缀。但是，我只是更新了笔并添加了-webkit-'代码，问题仍然存在 –

@MarianIoan更新了我的答案以反映'display：-webkit-flex' –

Flexbox未按预期在Safari上进行包装。我究竟做错了什么？

回答

相关问题