<a> with an inner <span> not triggering :active state in IE 8

Question

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 }

Solution 1

Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.

Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.

Solution 2

Tricky: IE 8 doesn’t seem to register the <a> tag as active when the <span> is clicked. (IE 6 and 7 are both fine. You found a regression!)

It does, however, register the <span> tag as active. If you can apply all the styles you want to change for the :active state to the <span>, then IE 8 will play along, e.g.

a.button:active,
a.button span:active/* This selector is for IE 8 only */ {
    color: #009;
    font-weight: bold;
}

Test page: http://www.pauldwaite.co.uk/test-pages/2769392/

Any styles that only apply to the link won’t change in IE 8 though. In the example above, the text changes colour when clicked, but the underline does not, as the underline style is attached only to the link (via the browser’s default styles), not the <span>.