Safari负边距 -

Question

我有两个价值观：“价格”和“旧价格”。应该越过“旧价格”，但该行应该比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 给了我这个：

原因是什么以及如何解决？

Answer 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

Answer 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