我不知道为什么，但Safari总是错位元素。
苹果浏览器：
Chrome(& others)：
码：
<div class="row flexthis">
<div class="col-md-4 col-sm-6 text-center">
<div class="product">
<img src="img.jpg" alt="" class="img-responsive">
<h3>Name</h3>
<p>Description</p>
</div>
</div>
</div>
<style>
.flexthis{
display: -webkit-Box;
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flexthis .col-md-4{
display: -webkit-Box;
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
}
</style>
解决方法
我只有与野生动物园有同样的问题。我从代码中删除了类行，它可以正常工作。
<div class="flexthis">
<div class="col-md-4 col-sm-6 text-center">
<div class="product">
<img src="img.jpg" alt="" class="img-responsive">
<h3>Name</h3>
<p>Description</p>
</div>
</div>
</div>
<style>
.flexthis{
display: -webkit-Box;
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flexthis .col-md-4{
display: -webkit-Box;
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
}
</style>
为什么要删除行？答案很简单，引导行中还有一些其他属性，如：after，before，content。所以删除行减少了这个开销，并允许flex正常工作。
