我正在使用flex来水平分离一些div,它在包括IE在内的所有其他浏览器中看起来很好,但由于某种原因它不适用于Safari。我在El Capitan上使用Safari 9.0.3。以下是代码。
HTML
<div class="grid-box">
<div class="display-price">
<div class="saleprice-wrap">
<div id="saleprice">
<span style="color: rgb(51, 51, 51);">$4.49</span>
</div>
</div>
<div id="sellprice" style="display: none;">$4.49</div>
</div>
<div class="info-wrapper">
<div class="type">Vinyl Sticker</div>
<div class="stock-status">
<div>
<h5>In stock</h5>
</div>
</div>
</div>
<div class="qty-wrapper">
<div class="form-qty">
<span class="label">Quantity:</span>
<input id="input_qty" type="tel" maxlength="3" class="textinput" value="1">
</div>
<div class="a2c">
<a id="" rel="nofollow" title="Add to Cart" class="" style="display: block;">Add to Cart</a>
</div>
</div>
</div>
CSS
.grid-box{
padding: 12px 30px;
margin: 0;
background: #add8e6;
display: flex;
z-index: 1
}
.display-price{
padding: 20px 15px 20px 0;
border-right: solid 1px #999;
align-self: center;
text-align: center
}
.saleprice-wrap, #sellprice {
display: inline-block;
font-size: 1.6em
}
#saleprice span{
font-size: 1.6em;
margin-right: 2px
}
.info-wrapper{
align-self: center;
width: 100%;
padding-left: 20px
}
.qty-wrapper{
margin-bottom: .5em;
text-align: center;
padding-left: 10px
}
.form-qty{
display: inline-block;
font-size: 15px;
margin-bottom: 10px
}
.a2c{
width: 160px;
display: inline-block
}
以下是codepen以及http://codepen.io/sinake/full/mPMzzm/
在chrome,firefox或IE中加载笔时,右边框正确显示价格,但在Safari或其他iOS设备中,价格与边框重叠。我试过玩显示器等但无济于事。有任何想法吗?提前谢谢。