【发布时间】：2017-05-02 17:39:20
【问题描述】：
我一直在使用 Safari 时遇到响应问题。 随着屏幕变小，我希望三列堆叠成两列，但行似乎保持相同的大小。
这是有问题的代码
HTML：
<section id="partners" align="center">
<div class="row">
<div class="small-4">
<div class="partner-logo" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
<img src="wp-content/uploads/2016/12/storks.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Save The Storks</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
</div><!--END .partner-name-->
</div><!-- END .small-4 -->
<div class="small-4">
<div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
<img src="wp-content/uploads/2016/12/cor.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>City of Refuge</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
</div><!--END .partner-name-->
</div><!-- END .small-4 -->
<div class="small-4">
<div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
<img src="wp-content/uploads/2016/12/alliance.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Alliance Defending Freedom</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
</div><!--END .partner-name-->
</div><!-- END .small-4 -->
<div class="small-4">
<div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
<img src="wp-content/uploads/2016/12/drjames.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Family Talk with Dr. James Dobson</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
</div><!--END .partner-name-->
</div><!-- END .small-4 -->
<div class="small-4">
<div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
<img src="wp-content/uploads/2016/12/cgc.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Church of God in Christ</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
</div><!--END .partner-name-->
</div> <!-- END .small-4 -->
</div> <!-- END .row -->
</section><!-- END #partners -->
CSS
.row {
max-width: 65.21739rem;
margin-left: auto;
margin-right: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
:after, :before {
box-sizing: inherit
}
html {
font-size: 115%;
box-sizing: border-box
}
当我注释掉 html 元素中的 box-sizing 属性时，似乎我的两列堆叠在一起，但没有适当的边距。
该页面在 Chrome 和 FireFox 上显示良好。我需要做哪些修改才能让它在 Safari 上正确显示？
添加信息----
我尝试按照其他帖子中的建议将 min-width 和 max-width 更改为 flex，但是虽然这解决了换行问题，但 flexboxes 停止调整大小。
这是我正在使用的媒体查询：
@media (min-width: 300px) {
.container {
width: 280px;
margin: 0 auto;
}
#partners .partner-logo img {
margin-top: 30px;
width: 80%;
height:auto;
}
#partners {
text-align: center;
padding: 80px 0px 80px 5px;
}
.partner-container {
margin: 0 auto;
min-width: 310px;
float: right;
}
.feature-image .hero-layer h1 {
padding: 80px 0 80px 0;
}
#partners-intro .row {
padding: 30px 0;
position: relative;
}
#partners-intro h3 {
font-size: 1rem;
}
#partners .row {
width: 100%;
position: relative;
margin: 0 auto;
}
#partners .small-4 {
min-width: 98.5%;
}
}
@media (min-width: 320px) {
#partners .small-4 {
min-width: 98.5%;
}
}
@media (min-width: 480px) {
.container {
width: 400px;
margin: 0 auto;
}
#partners .partner-logo img {
margin-top: 30px;
width: 80%;
height:auto;
}
#partners {
padding: 80px 0px 80px 5px;
}
#partners-intro .row {
padding: 50px 0;
}
#partners-intro h3 {
font-size: 1.44478rem;
}
}
@media (min-width: 600px) {
#partners .small-4 {
min-width: 49.5%;
}
}
@media (min-width: 768px) {
.container {
width: 700px;
margin: 0 auto;
}
#partners .partner-logo img {
margin-top: 30px;
width: 80%;
height:auto;
}
#partners {
padding: 80px 0px 80px 5px;
}
.partner-box {
margin: 0;
}
.feature-image .hero-layer h1 {
padding: 100px 0 100px 0;
}
#partners-intro .row {
padding: 60px 0;
}
#partners-intro h3 {
font-size: 1.58478rem;
}
#partners .small-4 {
min-width: 49.5%;
}
}
@media (min-width: 992px) {
.container {
width: 895px;
margin: 0 auto;
}
#partners .small-4 {
min-width: 32.5%;
}
}
@media (min-width: 1200px) {
.container {
width: 1101px;
margin: 0 auto;
}
.feature-image .hero-layer h1 {
padding: 180px 0 180px 0;
}
#partners-intro .row {
padding: 80px 0;
}
#partners-intro h3 {
font-size: 1.68478rem;
}
}
【问题讨论】：
-
这里有一篇关于各种浏览器中 flexbox 问题的精彩帖子，请查看，并在其中找到有关 Safari 问题的链接：stackoverflow.com/questions/35137085/…
-
...用它们的 flexbox 等效项替换最小和最大宽度：stackoverflow.com/questions/36636243/…
-
@NathanielFlick 这是否意味着在我的媒体查询中替换最小值和最大值？
-
是的，无论您在哪里使用最小和最大宽度。这有助于 Safari 理解您的声明。
标签： html css safari responsive