我目前正在设置一些使用flexbox的瓷砖，并且意味着占据最高瓷砖的整个高度。
我在tile的容器上使用以下代码：
@IBAction func someAction(sender:AnyObject) {
// this won't work and IB won't connect to this action
// because sender will be part of the symbol name
}
我已经在最新版本的Safari，Chrome和FF中尝试了我的实现，其中一切都按预期工作。然而，当我在safari 8中尝试时，瓷砖并没有占据最高瓷砖的整个高度。
我已查看http://caniuse.com/，并且Safari 8中的前缀应支持flexbox。
请参阅此处的代码笔：http://codepen.io/fennefoss/pen/WoqBqq
答案 0 :(得分：0)
当您在底部使用绝对定位元素时，promotion__box需要考虑其空间，这里使用额外的填充
.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="{"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>