16

我有一些我们网站的链接样式,CSS如下:

a:link {
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    text-decoration: none;
    color: #0676b3;
}

a:visited {
    color: #666;
    text-decoration: underline;
}

a:hover {
    color: #fff;
    background: #A5C2DB;
    border-radius: .1875em;
    padding: 0 .1875em;
}

这是一个jsfiddle来展示它们在不同状态下应该如何看待:

a {
  display: inline-block;
  margin: 10px;
}
/*  these styles are for presentation of the link states they are NOT the styles in my stylesheet*/

a.link {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: .875em;
  text-decoration: none;
  color: #0676b3;
}
a.visited {
  color: #666;
  text-decoration: underline;
}
a.hover {
  color: #fff;
  background: #A5C2DB;
  border-radius: 0.1875em;
  padding: 0 0.1875em;
}
<a class="link">Regular Link</a>
<br />
<a class="visited">Visited Link</a>
<br />
<a class="hover">Hovered Link</a>

:link = 蓝色文字无装饰

:visited = 带下划线的灰色文本

:hover = 浅蓝色背景的白色文本

:link和工作正常,:hover但由于某种原因,:visited国家拒绝显示下划线。在使用 firebug 或检查器的 Chrome 和 Firefox 中,我可以看到正在运行的:visited样式,并且文本是灰色的,只有它拒绝underline状态。

关于我做错了什么的任何想法?

4

1 回答 1

17

你没有做错任何事——它只是不再那样工作了。:visited 的样式被用作安全漏洞,因此浏览器制造商基本上消除了 :visited 的替代样式,除了少数属性(例如“颜色”、“背景颜色”)

见:http ://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

于 2012-04-25T17:20:18.637 回答