CSS：删除线未在文本中居中

Question

我们使用删除线来实际显示产品的旧价格与新价格。

如果您打开此链接，在页面底部，我们有一款产品正在促销。 http://www.gkelite.com/Gymnastics-Shopby-GiftoftheWeek

删除线因为旧的价格没有垂直居中。 任何人都可以帮忙解释为什么会发生这种情况吗？

Answer 1

我找到了一个利用伪元素 http://jsfiddle.net/urjhN/ 的解决方案

.strike-center {
    position: relative;
    white-space: nowrap; /* would center line-through in the middle of the wrapped lines */
}

.strike-center:after {
    border-top: 1px solid #000;
    position: absolute;
    content: "";
    right: 0;
    top:50%;
    left: 0;
}

，但是如果文本在行之间换行，该行将在这些行之间居中。

它似乎适用于所有主要浏览器；对于 IE7（及更早版本），您可以使用条件注释回退到经典的 line-through。

Answer 2

传统上，删除线是 x 高度（或小写“x”的高度）的某个百分比（70% 到 90%）。如果该行位于大写字母高度的 50%，则删除线可能会位于该组中任何小写字母的上方或顶部。删除线应该是在文本中的所有字母之间划一条线，这就是为什么从 x 高度进行测量的原因。

无论浏览器是否实际上使用 x 高度进行删除线计算，这一传统就是为什么删除线显示在大写字母高度的 50% 以下的原因。

有关术语的一些示例，请参阅下图：

Answer 3

无法控制删除线的偏移/位置，但是，有一种方法可以使用 text-decoration: underline< 来控制它/code> 使用以下组合：

span {
  background: lightyellow;

  text-decoration: underline;
  text-underline-offset: -40%; /* <-- this */
  text-decoration-skip-ink: none;
}

output { display:inline-block; width:50px; }

<output>-40%</output>
<input type='range' min='-100' max='100' value='-40' oninput='this.nextElementSibling.style.textUnderlineOffset=this.value+"%"; this.previousElementSibling.innerHTML=this.value+"%"'/>

<span>Text with strike-through</span>

---

Answer 4

它帮助我。只需为 iOS 设备设置您的 top 即可。

// Strike through
.strike-center {
    position: relative;
    white-space: nowrap;
}

.strike-center:after {
    border-top: 1px solid #000;
    position: absolute;
    content: "";
    right: 0;
    top: 49%;
    left: 0;
}

@supports (-webkit-touch-callout: none) {

    /* CSS specific to iOS devices */
    .strike-center:after {
        top: 40% !important;
    }
}