IE7 new bug on CSS rollovers - Introduction

Internet Explorer 7 (beta2) has bugs.

One of these bugs is brand new and affects the much used CSS rollovers. It's really too weird for words, but I'll write those words here anyway ;-)

Note: This bug has been fixed in the current release of IE7beta. If you still see the bug, download the new release here: http://www.microsoft.com/windows/ie/ie7/default.mspx.

Let's investigate these three links below.
When hovering over them, or tabbing from one to the next, you will see the background and foreground colours switch.

The CSS code for that is in a styleblock in the head section of this page, and looks like this: 

a:link,
a:visited{
	background-color:rgb(150,0,0);
	color:rgb(255,255,255);
}
a:focus,
a:hover,
a:active{
	background-color:rgb(255,255,255);
	color:rgb(150,0,0);
}

Ordinary pseudo-classes, work in all modern browsers, as they do in IE7 as well.

So far, so good, this is what we want and it works.

Now let's put these styles in an external stylesheet and see what happens: IE7 hover bug example