5
Tôi đã perused các diễn đàn tìm kiếm một câu trả lời cho điều này, nhưng vẫn không có gì hoạt động. Tôi đang sử dụng CSS3 kiểu dáng flexbox cho một chân trang trên trang web của tôi. HTML như sau:Flexbox vẫn là điểm nhấn trong Safari, flex-wrap không hoạt động
<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>[email protected]<br>
804.340.0115</p>
<span>Social goes here</span>
</div>
<div id="box3" class="box">3</div>
<!-- /copyright -->
</footer>
Và CSS của tôi là như sau ... một chút bc bẩn Ive đã cố gắng một loạt các công cụ để làm việc của mình:
.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;
}
này hoạt động tốt trên mọi trình duyệt, ngoại trừ Safari - gói không xảy ra. Tôi đang thiếu gì ở đây mà sẽ không cho phép gói?
Phiên bản Safari nào? – cimmanon
Phiên bản mới nhất, 8.0.4. Tôi đã điều chỉnh tiền tố của mình và tôi có mọi thứ để đẩy vào một dòng, nhưng vẫn không có gói nào xảy ra trên Safari. – la1ch3
Tôi không mong đợi nó tạo sự khác biệt ở đây vì Safari vẫn được liệt kê là yêu cầu tiền tố, nhưng các thuộc tính chưa được cố định của bạn phải là cuối cùng. Bạn cũng đang được dự phòng bằng cách chỉ định flex-hướng, flex-wrap, và flex-dòng chảy. – cimmanon