我不知道为什么,但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正常工作。