浏览器不尊重 a:visited text-decoration: none;

Posted

技术标签:

【中文标题】浏览器不尊重 a:visited text-decoration: none;【英文标题】:Browsers don't honor a:visited text-decoration: none; 浏览器不尊重 a:visited text-decoration: none; 【发布时间】:2015-09-20 13:43:48 【问题描述】:

我无法从访问过的链接中删除下划线。在我的电脑中,下面的 Fiddle 显示了在任何浏览器(Chrome、Firefox 和 IE 的当前版本)中访问的链接的黑色下划线文本。

a:link        color: red;   text-decoration: underline; 
a:visited     color: black; text-decoration: none;      
<p><a href="http://www.nevervisited.com">This link is not visited.</a></p>
<p><a href="http://www.google.com">This is link is visited.</a></p>

这是 Chrome 的已访问链接检查器。

我怀疑a:visited 变灰与此有关,但this question 关于变灰样式对我没有任何帮助,尽管它帮助了许多其他人。

这些答案(this、this)表明规范不关心子元素的 text-decoration,当它们的祖先定义了它时,但我认为这里不是这种情况。我的&lt;a&gt;s 没有带下划线的父母,我也没有使用伪元素,而是伪

另外,如果W3C 这么说,Chrome 为什么要将a:link 应用于访问的链接

这两个状态 [a:linka:visited] 是互斥的。

也许这与用户代理在网站上隐藏私人信息有关,就像 W3C 在前一个报价之后建议的那样?这个:

注意。样式表作者可能会滥用:link:visited 伪类来确定用户在未经用户同意的情况下访问了哪些网站。

因此,UA 可能会将所有链接视为未访问的链接,或实施其他措施来保护用户的隐私,同时以不同的方式呈现已访问和未访问的链接。

【问题讨论】:

这似乎与您提到的安全问题有关。另见hacks.mozilla.org/2010/03/… 【参考方案1】:

在大多数基于 Webkit 的浏览器(如 Safari)或基于 Blink 的(Chrome 和 Opera)中,您可以在 a:visited 链接上应用的唯一 CSS 属性是 color。别的什么都行不通。它与浏览器历史记录窃取有关。您可以从这里了解更多信息:

http://seclists.org/fulldisclosure/2013/May/13

但是,您可以使用a text-decoration: none; 更改所有链接的样式。

选择器本身并不危险,但如果你将它与像getComputedStyle() 这样的 javascript 函数结合使用,事情会变得非常丑陋,我所说的丑陋是指其他用户可以查看和阅读你的个人浏览器历史记录。

Mozilla(Gecko 引擎)limited the selector properties 到 colorbackground-colorborder-*-color

【讨论】:

肯定是这样,但您介意稍微改进一下答案的完整性吗?例如,@j08691 对我的问题的评论提供了更多可以使用的样式。一旦你让你的答案更有力,我接受它就没有问题了。 如果您需要我添加更多内容,请告诉我。 太棒了!我只是编辑一些东西:Opera 现在是 Blink 和一些格式。

以上是关于浏览器不尊重 a:visited text-decoration: none;的主要内容,如果未能解决你的问题,请参考以下文章

a:visited 在 Microsoft Edge 中不工作

link visited hover actived顺序

a标签伪类:visited下划线设置无效的原因及如何解决

浏览器不尊重 HTTP Expires 标头?

css样式中a:visited a:active 能帮我解释一下这是啥意思吗?

a标签4个伪类的顺序排列