0
HTML代码：Flexbox，就不会在Safari工作，但在Chrome的工作和Firefox
<div class="box-wrapper">
<div class="box odd">
<div class="box-title">TITLE 1</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 2</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 3</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 4</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 5</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 6</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 1</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 2</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 3</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 4</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 5</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis.</p>
</div>
</div><div class="box odd">
<div class="box-title">TITLE 6</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus.</p>
</div>
</div>
</div>
CSS：
.box-wrapper {
padding: 0;
margin: 0;
margin-left: -10px;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: space-around;
}
.box {
margin-top: 10px;
padding-left: 10px;
}
.box.odd {max-width: 16.66%;}
.box.even {max-width: 25%;}
.box.side-block {margin: 10px 0; border: 1px solid #ccc;}
.box.side-block .box-title {background-color: #70E070;}
.box.side-block .box-content {padding: 0 8px 8px;}
.box.side-block .box-content p {margin-bottom: 0;}
.box .box-title {background-color: #FF4A4A; color: #fff; text-align: center; margin-bottom: 10px;
padding: 5px;}
.box.odd .box-title {background-color: #4F8DFF;}
.box.even .box-title {background-color: #FF4A4A;}
.box .box-content {text-align: left;}
这里是codepen代码示例：http://codepen.io/anon/pen/WxzmZr
入住镀铬/ Firefox然后检查Safari。在Chrome/Firefox中，我看到所有6个盒子对齐（像我想要的），但在Safari中每行显示一个盒子。
我该如何解决这个问题？
在此先感谢。