IE7 new bug on CSS rollovers - Solution

The solution to the IE7 CSS rollover bug is as simple as it is weird: just write 'a:hover{}' in the styleblock below your @import rules, like so:

<style type="text/css">
@import "stylesheet.css";
a:hover{}
<style>

Again, the same links, the same styles in the same stylesheet, only one empty rule in the styleblock.

Somehow, this extra empty style rule activates the a:hover and a:active pseudo-class styles that are in the imported stylesheet.

And yes, it has to have the {}, and yes, it has to say a:hover. If you'd write 'a:active{}' instead, the styles would work when tabbing through the links, but not when hovering over them — 'a:hover{}' works both ways.

IE7 rollover bug introduction