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

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

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

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

【问题讨论】:

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

标签: css strikethrough


【解决方案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)在波斯文本上更加居中。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-26
    • 2012-01-23
    • 2014-03-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多