我的网站有一些链接样式,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,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 =白色文字与浅蓝色背景
链接和:悬停工作正常,但由于某种原因:访问状态拒绝显示下划线.在Chrome和Firefox中使用firebug或者检查器,我可以看到:访问风格在行动,文本是灰色的,只有它拒绝下划线状态.
关于我在做什么错误的任何想法?
解决方法
你没有做错什么 – 它不会这样工作(不再).被访问的造型被用作一个安全漏洞,所以浏览器制造商基本上消除了替代样式:除了少数属性(例如“颜色”,“背景颜色”)之外,
见:http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/