嵌套 div 仅在 safari 9 上不尊重边界答案

【问题标题】：Nested div is not respecting border on safari 9 only嵌套 div 仅在 safari 9 上不尊重边界
【发布时间】：2016-07-19 04:39:36
【问题描述】：

我正在使用 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
}

这里也是代码笔http://codepen.io/sinake/full/mPMzzm/

在 chrome、firefox 或 IE 中加载笔时，价格正确显示，边框在右侧，但在 Safari 或其他 iOS 设备中，价格与边框重叠。我试过玩显示器等，但无济于事。有任何想法吗？提前致谢。

【问题讨论】：

添加特定浏览器相关的弹性规则有帮助吗？喜欢显示：-webkit-box；显示：-moz-box；显示：-ms-flexbox；显示：-webkit-flex；显示：弹性；
我尝试将它们添加到 Safari 的 codepen 中，但没有看到任何变化。

标签： ios css safari flexbox

【解决方案1】：

自从提出这个问题以来，Safari 多年来一直在更新。我刚刚检查了 Safari 13 中的 codepen 链接，问题不再发生。结束这个。

【讨论】：