Chrome 和 Safari 中的 CSS 链接显示问题答案

【问题标题】：CSS link display issue in Chrome and SafariChrome 和 Safari 中的 CSS 链接显示问题
【发布时间】：2010-10-15 21:11:38
【问题描述】：

我遇到了仅在 Safari 和 Chrome 中出现的 CSS 问题。我正在处理的网站内容中的链接有一组样式。访问过的链接应该显示不同的颜色并带有虚线底部边框。尽管应用了所有其他样式，但在 Safari 和 Chrome 中，访问的链接缺少底部边框。有谁知道导致此问题的 webkit 引擎中的错误，或者我犯了一些愚蠢的错误？代码如下：

#content a:link {
    color: #b32951;
    text-decoration: none;
}
#content a:visited {
    color: #353535;
    border-bottom: 1px dotted;
    text-decoration: none;
}
#content a:hover, #content a:active {
    color: #b32951;
    background: #E6B5AF;
}

【问题讨论】：

标签： css google-chrome safari webkit

【解决方案1】：

这不是错误，而是一项功能。网站可以通过 :visited-styles 嗅探浏览器历史记录。您将只能以不影响链接指标的方式设置 :visited 样式，而添加边框会。 Fx4 也有同样的功能。 (Source, MDC)

【讨论】：

非常感谢。我刚刚将内容中的所有链接设置为带有虚线底部边框以解决此问题。这是一个有趣的变化，而且目前似乎还不太为人所知。

【解决方案2】：

尝试给边框底部一种颜色：

border-bottom: 1px dotted #000;

【讨论】：

我确实尝试过，但并没有什么不同：除了 Safari 和 Chrome 之外，所有浏览器都会显示边框。 AFAIK CSS 规范不要求为边框声明颜色。如果未声明，则边框继承文本的颜色。