CSS: активный псевдокласс - целевые дочерние элементы в IE

Question

Я делаю необычную кнопку с эффектами наведения и щелчка. Кнопка выглядит примерно так:

<a class="redB">
 <span class="a">&nbsp;</span>
 <span class="b">Email Us</span>
 <span class="c">&nbsp;</span>
</a>

Моя проблема в попытке получить доступ к трем элементам span в моем css следующим образом:

.redB:active span.a{background-position:0 -432px}
.redB:active span.b{background-position:0 -504px}
.redB:active span.c{background-position:0 -576px}

Это отлично работает в FF и Chrome, но не в Internet Explorer: (

Я также использую этот CSS для наведения

.redB:hover span.a{background-position:0 -216px}
.redB:hover span.b{background-position:0 -288px}
.redB:hover span.c{background-position:0 -360px}

И это прекрасно работает в FF, Chrome и IE

Есть ли способ заставить класс: active работать так же, как для дочерних элементов в IE?

Answer 1

разобрался чуть больше,

IE не делал класс: active для дочерних элементов, потому что он вел себя так, как если бы дочерние элементы находились поверх ссылки, однако он работал бы, если щелкнуть ссылку по ее краям.

В будущем я постараюсь использовать более простые кнопки: active будет работать для самой ссылки, но не для дочерних элементов в ссылке, которую IE рассматривает как почти отдельную, а не часть самой ссылки, по крайней мере это делает для: активного класса.

Answer 2

Исправление JavaScript

Вы можете попробовать один из них, они утверждают, что IE7 и заставить его вести себя как обычный браузер.

• ie7.js
• PIE

Я не уверен, на какую версию IE вы ссылаетесь, но w3 может сказать о псевдоклассе :active:

Примечание. Также обратите внимание, что в CSS1 псевдокласс ': active' применяется только к ссылки.

IE6 , IE7 не в состоянии должным образом поддерживать :active