昨天在做页面重构时,上级要求将所有链接都增加访问过后颜色并带下划线。
(原效果代码为
a{color:#666;text-decoration:none}
a:hover{text-decoration:underline;}
)
本认为这应该是很简单的事情,因为一个关于A的口令记得很清楚,那就是LVHA。即A伪类编写顺序。我按要求进行编写后在IE、Opear测试都是没有问题,但在chrome和FF中测试发现,链接访问过后,有颜色但木有下划线,因为直接在浏览器下无法找出原因,所以我就将代码进行修改,但无论是加!important还是重新进行排序,结果都是一样的。在发现自己没有办法的时候,就GOOGLE一下。发现原来有类似问题出现,查看具体原因后,发现原来是chrome和ff出于安全考虑将A中visited进行限制。也就是说这个问题是浏览器本身的原因,而不是代码原因。故我之前的的代码是没有错误。
即:
a:link{color:#666;text-decoration:none;}
a:visited,a:active,a:hover{color:#e24800;text-decoration:underline;}
另外我进行了一些测试,发现只在当在a:link下设置有下划线的情况下,a:visited在chrome和ff中才会出现下划线,当然必须先设置它有下划线才行。
即:
a:link{color:#666;text-decoration:underline;}
a:visited,a:active,a:hover{color:#e24800;text-decoration:underline;}
最后从网上COPY一段关于chrome和ff关于a:visited的原文:
WebKit is a browser framework used in multiple applications, including Apple Safari and Google Chrome browsers.
WebKit
is prone to an information-disclosure vulnerability. This issue occurs when Cascading Style Sheets (CSS) use the ':visited' pseudo-class. Attackers may determine which sites a user has visited.
An attacker can exploit this issue by enticing an unsuspecting user into viewing a malicious webpage.
Successful exploits can allow the attacker to obtain sensitive information.
NOTE: This issue was previously covered in BID 40620 (Apple Safari Prior to 5.0 and 4.1 Multiple Security Vulnerabilities) buthas been given its own record to better document it.
Both the next release versions of Gecko (tentatively named Firefox 3.7) and WebKit (Safari 5) will
implement changes to the handling of the :visited pseudo-class. Google Chrome will, I suppose, also
implement this.
In
short, those browsers will limit the ways the a:visited state can be styled. Color,
background-color, and to some extend, outline, border are not affected, as long as you don't use
alpha-transparency (rgba()), change the border-style or border-width, etc. Other changes will be
ignored and fall back to what is specified for the a:link state.