Safari 8 中的 Flexbox 布局中断答案

【问题标题】：Flexbox layout breaking in Safari 8Safari 8 中的 Flexbox 布局中断
【发布时间】：2017-05-12 18:43:16
【问题描述】：

我目前正在设置一些使用 flexbox 的磁贴，旨在占据最高磁贴的整个高度。

我在瓷砖的容器上使用以下代码：

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

我已经在最新版本的 Safari、Chrome 和 FF 中尝试了我的实现，一切都按预期工作。但是，当我在 safari 8 中尝试时，瓷砖并没有占据最高瓷砖的全部高度。

我已经检查了http://caniuse.com/，并且 Safari 8 中的前缀应该支持 flexbox。

在此处查看代码笔：http://codepen.io/fennefoss/pen/WoqBqq

【问题讨论】：

可能的指导：stackoverflow.com/q/33636796/3597276
也许是为了快速回答，但您的意思是 2:rd 框中的文本重叠吗？ .. 或者您还有其他视觉问题？ ...另外，将float 与flexbox 组合使用也可能会导致问题，所以我建议删除这些（我在下面链接的codepen 中做了，它仍然有效）
您能否让我知道给出的答案有什么问题，以便我能够进行调整并让您接受？

标签： css safari flexbox

【解决方案1】：

当您在底部使用绝对定位元素时，您的 promotion__box 需要考虑其空间，这里使用额外的填充完成

Updated 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;
}

示例 sn-p

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

【讨论】：

当我尝试打开它时，codepen 似乎只是不断重新加载：S
@MikkelFennefoss 在我的回答中添加了示例