Разбиение макета 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

1 ответ

  1. Поскольку вы используете абсолютный расположенный элемент внизу, вам promotion__boxнужно учитывать его пространство, здесь сделано с дополнительной прокладкой

    Обновленный codepen

    .promotion__box {
        color: #666;
        font-size: 1.3333333333em;
        margin-top: -2%;
        padding: 10px 0 80px 20px;     /*  added 80px to bottom  */
        margin: 0 auto;
        width: 250px;
    }
    

    Пример фрагмента

    .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>