我已经仔细阅读了论坛,寻找答案,但仍然没有任何效果。我正在使用 CSS3 弹性框样式作为我网站上的页脚。HTML 如下所示:
<footer class="footer" role="contentinfo">
<!-- copyright -->
<div id="box1" class="box">
<a class="btn" id="btn-donate" href="#">Donate</a>
<a class="btn" id="btn-news" href="#">Get News</a>
</div>
<div id="box2" class="box">
<h2>Quill Theatre</h2>
<p>P.O. Box 7265<br>
Richmond, VA 23221</p>
<p>Info@QuillTheatre.org<br>
804.340.0115</p>
<span>Social goes here</span>
</div>
<div id="box3" class="box">3</div>
<!-- /copyright -->
</footer>
我的CSS如下...这有点肮脏 bc 我一直在尝试一堆东西来工作:
.footer {
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-webkit-flex-flow: row wrap;
width: 100%;
}
.footer .box {
order: 1;
min-width: 50%;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex-shrink: 1;
flex-basis: auto;
-webkit-flex-shrink: 1;
-webkit-flex-basis: auto;
}
.footer #box2 {
order: 0;
min-width: 100%;
flex: 2 2 auto;
-webkit-flex: 2 2 auto;
-ms-flex: 2 2 auto;
text-align: center;
border-top: 3px solid black;
border-bottom: 3px solid black;
padding-bottom: 2em;
}
.footer #box2 h2 {
text-transform: uppercase;
}
这在每个浏览器上都运行良好,除了 Safari - 不会发生包装。我在这里错过了什么不允许包装?
只是为了任何想知道的人:
我有太多的前缀,这甩掉了 Safari 的网络工具包。我能够通过使用适当的弹性框规则(例如,使用 flex 作为简写,而不是声明 flex-grow 或 flex-shrink)并使用 Autoprefixer 来处理供应商前缀来解决这个问题。
对于遇到类似问题的任何人。
我带有内联列表的 flex 布局在 Chrome 上运行良好,但包装在 Safari 上不起作用。
我在li
上有一个min-width: 25%
。一旦我删除它,它就会在 Safari 上正确显示。