Кроссбраузерные проблемы псевдокласса :active

Спасибо за полезную критику, добавил код в статью, надеюсь от этого она будет восприниматся легче.

В Опере для этого приходится использовать :focus. Почему-то он в ней работает как :active, а на :active опера не реагирует.

Я, кстати, сталкивался недавно с такой же проблемой: верстальщики сделали кнопочку с такой структурой:
Text

Мне пришлось добавить активное состояние для всех браузеров (вебкитах и FF). Получились примерно такие костыли:
/* :hover везде нормально работает */
.anchorClass:hover span
.anchorClass:hover span span

/* Для нормальных браузеров и для оперы */
.anchorClass:active span, .anchorClass:focus span
.anchorClass:active span span, .anchorClass:focus span span

/* Для IE */
.anchorClass span:focus
.anchorClass span span:focus

Насколько я помню, это работает для IE7+, Оперы (последних версий — точно) и большого ряда версий нормальных браузеров (точно не проверяли).

Не совсем понял что нужно сделать автору топика, но возможно ему это тоже поможет, если я всё правильно вспомнил.

Ага, порой даже удивляешься: «неужеле еще не обо всем написали?» (:

Цвета играют чисто декоративную роль, я добавил код в статью, что бы можно было сразу отследить какой элемент какого цвета, в том числе, какой цвет мы передаём, декорируя через :active.

Спасибо за пример, надеюсь он поможет другим понять суть топика.

Это нативное поведение кнопок по нажатию на них, остановить смещение текста на прямую не получится, только обвешивать хаками (декорируя через :active), или заменять button на другой тег.

Я пробывал наоборот, повторить эффект button/input для ссылок, делал это через :active

a:active {
    position: relative;
    top: 1px;
    left: 1px;
    }