css - CSS：删除线不在文本中心

Question

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

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

旧价格的删除线未垂直居中文本。任何人都可以帮助解释为什么会这样吗？

Answer 1

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

无论浏览器是否实际使用 x 高度进行删除线计算，这一传统就是为什么删除线显示在 50% 大写高度的不足之处。

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

Answer 2

我找到了一个利用伪元素的解决方案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使用条件注释回退到经典。