CSS：删除线不在文本中心答案

【问题标题】：CSS: Strike-through not centered through the textCSS：删除线不在文本中心
【发布时间】：2012-01-03 04:25:53
【问题描述】：

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

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

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

【问题讨论】：

更多信息请访问stackoverflow.com/questions/2503364/…
尝试增加/减少行高。您也可以尝试其他字体。除此之外，我认为除非 CSS3 中的某些内容可能有所帮助，否则我认为您几乎无法获得所获得的东西，但即使它可能不会在跨浏览器上保持一致。

【解决方案1】：

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

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

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

【讨论】：

【解决方案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（及更早版本），您可以使用条件 cmets 回退到经典的 line-through。

【讨论】：

这是一个很好的解决方案。对我来说，“top: 50%”在跨浏览器上的渲染略有不同（我们的设计师担心像素完美），但将其更改为 px 的底部是浏览器一致的，尽管字体大小敏感。
我遇到的一个（晦涩的）问题是，在大多数浏览器中，文本移动没有得到动画像素 - 与此边框完美同步（Chrome 很好，firefox、IE 和 Safari 都没有） 't)，如果两者都被转换，则会导致删除线相对于文本抖动。我们通过将边框替换为下划线字符串的内容来解决这个问题，然后隐藏溢出以切断多余的内容。该文本以像素完美的方式与下面的文本进行了动画处理。
在我的情况下，除了这个答案，将.strike-center 显示设置为inline-flex，有助于：1）通过唯一的文本，而不是整个块。 2）在波斯文本上更加居中。