Menu
Is there any reason why this does not work on Internet Explorer or Chrome:
<html>
<head>
<style>
A {font-weight: bold; color:black;}
A:visited {font-weight: normal; color: black; }
.Empty {font-weight: bold; color: black; }
</style>
</head>
<body>
<a href="http://mysite">click me</a>
</body>
</html>
The link I click never goes to normal and just stays bold. On some other browsers it works.
Changing case did not affect it. Changing a to a:link did not affect it. Changing color works, just not font-weight.
One workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way.
236
Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.
Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.
You can see there are some specific things browsers do to protect against this:
- The
window.getComputedStylemethod, and similar functions such aselement.querySelector, will always return values indicating that a user has never visited any of the links on a page.- If you use a sibling selector such as
:visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.- In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Thus, there's no workaround for this issue.
101
One useful attribute that does work with :visited is background-color. So try:
:visited {background-color:red;}
:visited also works on non-a elements.
30
The problem has to do with history sniffing, changing css properties is disabled for visited links due to privacy issues.
I came up with the following workaround to reach the desired effect. It is possible to change the background-color of the visited link.
The solution is very simple:
Here's an example:
a:link {
color:#000;
background:#FFF url('../img/linethrough.png') repeat-x top left;
}
a:visited {
background-color:#000;
color:#000;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
