【问题标题】:How can I remove the underline of a link in chrome using CSS? [duplicate]如何使用 CSS 删除 chrome 中链接的下划线? [复制]
【发布时间】:2011-06-22 01:07:12
【问题描述】:

(它适用于 FF) 如何使用 CSS 删除已访问链接的下划线?我试过了:

a:visited {
    color: rgb(255, 255, 255);
    text-decoration: none !important;
}

a:visited {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

【问题讨论】:

  • 您是否为链接设置了border-bottom 而不是text-decoration
  • 您能否通过示例向我们展示您的网站?我希望您问题中的示例可以在 Chrome 中使用...

标签: css google-chrome hyperlink underline


【解决方案1】:

在大多数基于 webkit 的浏览器(如 Chrome)中,您可以对 :visited 链接应用的唯一 CSS 属性是 color。这是为了防止history stealing。此外,您无法确定来自 JavaScript 的链接的 color CSS 属性的值。详情请见https://bugs.webkit.org/show_bug.cgi?id=24300

但是,您可以使用a{text-decoration: none;} 更改所有链接的样式。 Here's a demo of the whole affair.

【讨论】:

  • 为什么需要!important?在我刚刚使用 a { text-decoration: none; } 的网站上,我没有在 Chrome 中看到任何下划线
  • @jeroen 通常,如果您的规则的特异性大于内置默认样式表中文本装饰规则的特异性,则不需要重要。对于 color 属性,许多浏览器习惯于在更具体的 a:link 或 a:visited 元素中声明它。由于我找不到任何需要 !important 进行文本装饰的浏览器,因此我将其从答案中删除。
  • 啊,不知道,谢谢!
【解决方案2】:

一些浏览器供应商已经决定/意识到单独设置a:visited 超链接的样式会对用户构成安全/隐私威胁。因此,有些(尽管不是全部)已经取消了以不同方式设置 a:visited 的功能。

我怀疑 Chrome 是这样的。

参考资料:

【讨论】:

    【解决方案3】:

    您的a:visited {} 定义必须您的一般a {} 定义之前。您可以使用 a:visited 设置颜色,但设置文本装饰不起作用 - 但如果您稍后为元素设置通用文本装饰,它会起作用。

    所以:

    a:visited {color: yellow;}
    a {color:yellow; text-decoration: none; }
    

    有效(以黄色显示所有链接,没有文字装饰),但是

    a {color:yellow; text-decoration: none; }
    a:visited {color: yellow;}
    

    a {color:yellow; text-decoration: none; }
    a:visited {color: yellow; text-decoration: none;}
    

    不要(两者都以黄色给出所有链接,但带下划线)

    【讨论】:

    • 这个是金色的。另请注意,您的这种样式不能使用 JavaScript 重新应用,至少在 Chrome 中是这样。如果您尝试重新加载这种样式表,您将重新设置它们的样式。
    猜你喜欢
    • 1970-01-01
    • 2020-10-30
    • 1970-01-01
    • 2021-01-26
    • 2013-11-10
    • 2015-02-26
    • 1970-01-01
    • 2015-11-10
    • 2016-02-29
    相关资源
    最近更新 更多