CSS：Strike-through不是通过文本集中

Question

我们正在使用 strike-through 来实际显示旧价格与产品的新价格。

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

旧价格的突破不会垂直居中于文本。 任何人都可以帮助解决它为什么会发生的事情吗？

Answer 1

透视传统 x高度的一定百分比（70％至90％）（或小写字母的高度＆＃39; x＆＃39;）。如果线条处于帽子高度的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。