IE 7/8: Active Pseudo on Block Elements

Question

i have run into problem regarding IE7/8 ignoring the :active pseudo class on elements with display:block;

HTML:

<a>My Link</a>

CSS That Works:

a:active{color:yellow}

CSS That Fails:

a{display:block}
a:active{color:yellow}

Does anyone know of a solution to this, or will I have to resort to JS?

Answer 1

Ironically, @Kevin already "fixed" your problem without even realising.

Change the HTML from this:

<a>My Link</a>

to this:

<a href="#">My Link</a>

and it works in IE7, see: http://jsbin.com/exuga3

Unexpected things like this can happen when you have <a> tags without an href attribute.

If you really don't want the "hand mouse pointer", specify cursor: default: http://jsbin.com/exuga3/4