1 марта 2011 г.

Псевдо-класс :active и Internet Explorer

Заметил одну особенность использования псевдо-класса :active в Internet Explorer'е. Стили присвоенные с помощью псевдо-класса :active в этом браузере сработают только если вы кликаете непосредственно по элементу, которому был указан псевдо-класс, но не по его дочерним элементам.

Рассмотрим пример:

<p>Просто текст с <span>элементом</span> внутри.</p>

CSS:

p:active { text-decoration: underline; }

В IE текст внутри параграфа станет подчеркнутым только если вы кликните непосредственно по элементу <p>, а не по span'у внутри него. Это не касается остальных браузеров. В Safari, Google Chrome, Opera и Firefox текст внутри параграфа станет подчеркнутым не зависимо от того, нажали ли вы на дочерний элемент или на сам параграф.

Аналогично в IE не сработает следующий css-код:

p:active span { text-decoration: underline; }

Текст внутри элемента <span> не станет подчеркнутым если нажать на элемент <p>, в то время как в остальных браузерах текст будет подчеркнутым.

Не знаю что говорит на этот счет спецификация CSS (подозреваю что ничего), но мне кажется что Firefox и остальные браузеры более предсказуемо и правильно обрабатываю выше приведенные примеры нежели IE.

Описанный выше код касается всех существующих на данный момент версий Internet Explorer'а — 7, 8, 9 RC. Собственно IE7 вообще понимает псевдо-класс :active только для элемента <a>.

В качестве демонстрации можете потыкать по элементам внутри параграфов на этой страничке — http://quirksmode.org/css/hover.html.