Safari 8でFlexboxレイアウトが破損しました

Question

現在、フレックスボックスを使用しているタイルをいくつか設定しています。最も高いタイルの高さ全体を占めるようになっています。

私はタイルのためのコンテナに次のコードを使用しています：私はすべてが期待どおりに動作するのSafari、ChromeとFFの最新バージョンで私の実装を試してみました

{ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

。しかし、私がサファリ8でそれを試してみると、タイルは一番高いタイルの最高の高さを占めることはありません。

私はhttp://caniuse.com/上でチェックしているとフレキシボックスはSafariの8の接頭辞でサポートされなければならない

ここを参照してくださいコードペン：あなたが一番下に絶対的な位置付け要素を使用すると、あなたのpromotion__boxを取る必要があるhttp://codepen.io/fennefoss/pen/WoqBqq

Answer 1

口座にそのスペースが、ここでは余分なパディング

Updated codepen

​​3210 で行います

サンプルスニペット

.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="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}"> 
 
      <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}"> 
 
      <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}"> 
 
      <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}"> 
 
      <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" 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="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self"> 
 
Shop now 
 
</a> 
 
      </div> 
 
     </article> 
 

 
    </li> 
 

 
</ol>