直线穿过文本不居中.CSS

Question

我们使用直通来实际显示旧价格与产品的新价格.

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

旧价格的直线不是垂直居中的文本.任何人都可以帮助解决为什么会发生这种情况吗？

Answer 1

甲透是传统上在x高度的一定百分比(70%〜90%)(或下壳体的"x"的高度).如果线条处于帽子高度的50%,那么透视可能会在集合中任何小写字母的上方或顶部.穿透应该在文本中的所有字母上划一条线,这就是为什么从x高度开始测量的原因.

无论浏览器是否实际使用x高度进行删除线计算,这一传统就是为什么在没有50%的帽高度的情况下显示透视效果的原因.

有关这些术语的一些示例,请参见下图:

Answer 2

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