I want to style the :active state of a button that is represented by an <a> tag. The <a> tag has an inner <span> (beacuse I want to add an icon to this button).

I notice the :active state is triggered properly in everything but Internet Explorer 8. In IE 8, it appears that the area around the <span> (the <a>’s padding) triggers the :active state, but when clicking directly on the text within the <span>, the :active state is not triggered.

Is there a way to fix this without resorting to Javascript?

HTML

<a class="button" href="#">
 <span>Add a link</span>
</a>

CSS

a.button { some styles }
a.button:active { some other styles }