我目前正在設置一些使用flexbox的瓷磚，並且意味着要佔用最高瓷磚的整個高度。Safari 8中的Flexbox佈局突破
我公司採用的瓷磚在容器上下面的代碼：
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
我已經盡在Safari，Chrome和FF，一切按預期工作的最新版本執行。然而，當我在safari 8中試用它時，瓷磚並不佔據最高瓷磚的全高。
我已經在http://caniuse.com/和Flexbox的檢查應與前綴在Safari支持8
見代碼筆在這裏：http://codepen.io/fennefoss/pen/WoqBqq
當你在底部使用絕對定位的元素，你promotion__box需要採取其空間考慮，這裏有微胖
示例代碼段
.row-type14 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.row-type14__slot1,
.row-type14__slot2,
.row-type14__slot3,
.row-type14__slot4 {
box-sizing: border-box;
margin-right: 2.1276595745%;
width: 23.4042553191%;
position: relative;
}
.widget__promotion {
box-sizing: border-box;
margin-right: 2.1276595745%;
width: 100%;
margin-right: 0;
height: 100%;
background: #e4e4e4;
}
.promotion__image {
height: auto;
width: 100%;
}
.promotion__box {
color: #666;
font-size: 1.3333333333em;
margin-top: -2%;
padding: 10px 0 80px 20px;
margin: 0 auto;
width: 250px;
}
.promotion__links {
bottom: 2.49rem;
left: 0;
position: absolute;
right: 0;
margin: 0 auto;
text-align: center;
}<ol class="row-type14">
<li class="row-type14__slot1 js-row-item">
<article class="widget__promotion" data-layer-promotion-view="{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":1,"id":"slh-home-promotion-widget-1","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}">
<a data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":1,"id":"slh-home-promotion-widget-1","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
<img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">
</a>
<div class="promotion__box promotion__box-graphic">
<h3 class="promotion__box-title">Selected Promotion</h3>
<span class="promotion__box-subtitle">#selectedhomme</span>
</div>
<div class="promotion__links">
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":1,"id":"slh-home-promotion-widget-1","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":1,"id":"slh-home-promotion-widget-1","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
</div>
</article>
</li>
<li class="row-type14__slot2 js-row-item">
<article class="widget__promotion" data-layer-promotion-view="{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":2,"id":"slh-home-promotion-widget-2","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}">
<a data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":2,"id":"slh-home-promotion-widget-2","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
<img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">
</a>
<div class="promotion__box promotion__box-graphic">
<h3 class="promotion__box-title">Selected Promotion</h3>
<span class="promotion__box-subtitle">#selectedhomme some other text text text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text</span>
</div>
<div class="promotion__links">
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":2,"id":"slh-home-promotion-widget-2","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":2,"id":"slh-home-promotion-widget-2","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
</div>
</article>
</li>
<li class="row-type14__slot3 js-row-item">
<article class="widget__promotion" data-layer-promotion-view="{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":3,"id":"slh-home-promotion-widget-3","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}">
<a data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":3,"id":"slh-home-promotion-widget-3","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
<img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">
</a>
<div class="promotion__box promotion__box-graphic">
<h3 class="promotion__box-title">Selected Promotion</h3>
<span class="promotion__box-subtitle">#selectedhomme</span>
</div>
<div class="promotion__links">
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":3,"id":"slh-home-promotion-widget-3","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":3,"id":"slh-home-promotion-widget-3","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
</div>
</article>
</li>
<li class="row-type14__slot4 js-row-item">
<article class="widget__promotion" data-layer-promotion-view="{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":4,"id":"slh-home-promotion-widget-4","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}">
<a data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":4,"id":"slh-home-promotion-widget-4","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
<img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">
</a>
<div class="promotion__box promotion__box-graphic">
<h3 class="promotion__box-title">Selected Promotion</h3>
<span class="promotion__box-subtitle">#selectedhomme something more ! dasdsadas dasdsad dasdas dsadsads dsadsadsadas</span>
</div>
<div class="promotion__links">
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":4,"id":"slh-home-promotion-widget-4","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>
<a class="promotion__call-to-action" data-layer-click="{"event":"promotionClick","ecommerce":{"promoClick":{"promotions":[{"row_type":"14 tall ones","row_id":"home-page-row-08-widget","column_id":4,"id":"slh-home-promotion-widget-4","name":"Selected promotion widget","creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg"}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
</div>
</article>
</li>
</ol>當我嘗試打開它時，codepen似乎只是繼續重新加載：S –
@MikkelFennefoss在我的答案中添加了示例 – LGSon
可能指導意見：http://stackoverflow.com/q/33636796/3597276 –
也許就是是快速回答，但你的意思是在文字重疊2：rd盒子？ ..或者你有其他的視覺問題？ ...另外，在'flexbox'組合中使用'float'可能會導致問題，所以我建議刪除這些（我在下面鏈接的codepen中，它仍然工作） – LGSon
你能告訴我什麼不與回答一個給，所以我可以調整，你接受？ – LGSon