Question

我正在使用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设备中，价格与边框重叠。我试过玩显示器等但无济于事。有任何想法吗？提前谢谢。

嵌套div不仅仅尊重safari 9上的边界

0 个答案: