【问题标题】:Inconsistent underline thickness in IEIE中下划线粗细不一致
【发布时间】:2013-02-08 08:02:49
【问题描述】:

我希望我的锚链接的内容始终为粗体和下划线,但锚标记内的跨度不应为粗体。

示例标记:

<a>Hello, <span>fooooo</span> bar</a>

样式:

    a {
        font-weight: bold;
        text-decoration: underline;
    }

    span {
        font-weight: normal;
    }

(右键单击图像并选择查看/在新标签中打开以获得更好的视图)

在 IE8+ 中,下划线粗细不一致:显然是由链接内粗体文本的百分比决定的。有没有办法让页面上的每个链接的下划线看起来完全相同?

小提琴:http://jsfiddle.net/FfBGn/

【问题讨论】:

    标签: css internet-explorer cross-browser


    【解决方案1】:

    有点骇人听闻,但你可以用这个代替text-decoration:underline

    border-bottom:1px solid #000;
    

    demo


    或者,如果您必须使用text-decoration:underline, 你可以加粗加粗

    font-weight:800;
    

    demo

    【讨论】:

    • 我可以,但是如果我想在我的锚点上设置 display: block 和一些宽度怎么办?喜欢实施上下文广告或搜索建议? Border-bottom 会很快变得讨厌。寻找更通用的解决方案。
    • 替代方案依赖于浏览器错误。根据规范,在此处设置 font-weight: 800 等同于 font-weight: bold。没有 Arial、Verdana 或浏览器的 sans-serif 字体的重 800 字体(并且您的示例中的“trebuchet”字体不存在)。所以使用的权重应该是最接近的可用权重,bold (= 700)。
    【解决方案2】:

    也许更简单的方法是设置锚的边框而不是下划线?这样你就可以自己决定厚度了?

    border-bottom: 1px solid #000000;
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-07-04
      • 2023-01-20
      • 1970-01-01
      • 1970-01-01
      • 2011-10-23
      • 2021-08-15
      • 2016-01-17
      • 1970-01-01
      相关资源
      最近更新 更多