with an inner not triggering :active state in IE 8

Question

I want to style the :active state of a button that is represented by an tag. The tag has an inner

Answer 1

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>.

Answer 2

I had the same issue, and FINALLY figured it out: You need a target in the <a> tag, i.e. add the "href" attribute in the <a> tag:

<a id="logonButton" class="button submit" href="@Url.Action("Index", "Home")"><span>Log On</span></a>

Works like a charm in all IE versions. :)