Safari 负边距顶部答案

【问题标题】：Safari negative margin-topSafari 负边距顶部
【发布时间】：2018-07-20 06:31:02
【问题描述】：

我有两个值：“价格”和“旧价格”。应该越过“旧价格”，但这条线应该比text-decoration: line-through 更细。这是我的代码：

HTML：

<span class="price">
  <span class="old-price">
    1000
  </span>
  899
</span>

CSS：

span {
    font-size: 40px;
    display: inline-block;
    padding-right: 15px;
}

span.old-price {
    color: #999;
}

span.old-price:after {
    content: ' ';
    border-bottom: 3px solid #999;
    display: block;
    margin-top: -25px;
}

Codepen： here

它可以在 Chrome 和 Firefox 中正常运行：

但是 Safari 8 给了我这个：

是什么原因，如何解决？

【问题讨论】：

标签： html css safari margin text-decorations

【解决方案1】：

我现在无法重现，您使用的是哪个版本的 Safari？

无论如何，你仍然可以使用好的旧绝对定位：

span {
    font-size: 40px;
    display: inline-block;
    padding-right: 15px;

}

span.old-price {
   color: #999;
   position: relative;
}

span.old-price:after {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 0;
    right: 10px;
    border-bottom: 3px solid #999;
    display: block;

    transform: translateY(-50%);
}

Codepen：https://codepen.io/superbiche/pen/QQpbmq

【讨论】：

谢谢，它有效！抱歉，我没有提到版本：它是相当旧的 Safari 8，但仍在使用中。
太棒了！不要忘记将此答案标记为正确答案。是的，还是很习惯你是对的

【解决方案2】：

这个解决方案似乎不错：

span {
    font-size: 40px;
    display: inline-block;
    padding-right: 15px;
}

span.old-price {
    color: #999;
    background: linear-gradient(to bottom, #999 5%, transparent 0%) 0 22px no-repeat;
}

https://codepen.io/anon/pen/wyJaQe

【讨论】：