Strange IE9 + Chrome css bug 03 april 2011 Allan HTML, CSS Just doing some tweaking today I came across a very strange bug in IE9. I’m guessing for some reason that it must be by design, but it just seems odd for making a design reason which turns against the css standard. The bug is fairly simple to reproduce and I created it using the following code <html> <head> <style type="text/css"> a { color: #0000FF; } a:visited { color: #00FF00; } body div a { color: #FF0000; } </style> </head> <body> <div> <a href="http://microsoft.com">Simple link</a> </div> </body> </html> This page is very simple and contains nothing but a single link. If you open the page in IE, FF and Chrome you will see 2 different results. If you haven’t visited microsoft.com, they will all be the same and display the link as red, which as expected since the best selector match is “body div a”. If you have visited microsoft.com though, then the browsers seem to have a different opinion as to what is most important. Chrome and IE decides that a:visited suddenly because the most important rule. The reason for that is not quite obvious. If we look at the specification found at http://www.w3.org/TR/CSS2/cascade.html#specificity then we should easily be able to calculate which rule should win. Then we have a:visited /* a=0 b=0 c=0 d=2 --> specificity = 0,0,0,2 */ body div a /* a=0 b=0 c=0 d=3 --> specificity = 0,0,0,3 */ And if I do remember correctly from my math classes, then 3 is larger then 2 and therefore the last rule should always win no matter if the link has been visited or not. So this just seems like a odd bug for the 2 major browsers, and since FF does not have the bug, then I can be refuted as a common consensus. So you can only ask yourself if it is by design or not, and if yes, why make the decision not to follow the standards?