Ios 嵌套的div仅与safari 9上的边界无关

我正在使用flex水平分隔一些div，它在包括IE在内的所有其他浏览器中看起来都不错，但由于某些原因，它在Safari上不起作用。我正在El Capitan上使用Safari 9.0.3。下面是一个代码

HTML

这是密码笔

---

在chrome、firefox或IE中加载笔时，价格会正确显示，边框在右侧，但在Safari或其他iOS设备中，价格会与边框重叠。我试过摆弄显示器等，但没用。有什么想法吗？提前感谢。

添加特定浏览器相关的flex规则是否有帮助？喜欢显示：-网络工具包盒；显示器：-moz盒；显示：-ms flexbox；显示：-webkit flex；显示器：flex；我尝试在Safari的代码笔中添加它们，但没有看到任何更改。添加特定的浏览器相关flex规则是否有帮助？喜欢显示：-网络工具包盒；显示器：-moz盒；显示：-ms flexbox；显示：-webkit flex；显示器：flex；我尝试在Safari的代码笔中添加它们，但没有看到任何变化。

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

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