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

Question

我有一个弹性箱网格，它根本没有包装在Safari 7（我正在测试的那个）上。

这是一个简化的例子：

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;
} 

您可以在笔中找到代码：code

这是Safari中的结果（使用Browserstack制作的截图）

我真的很困惑。非常感谢任何帮助。

谢谢！

Answer 1

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

您的display: -webkit-box;已经有ul，但是他们的Safari版本可能想要使用display: -webkit-flex;