: активный селектор CSS не работает для IE8 и IE9 - PullRequest
Новая
       44

: активный селектор CSS не работает для IE8 и IE9

6 голосов
/ 08 апреля 2011

Вот мой сайт . Это последняя проблема из серии кросс-браузерных расхождений, которые я испытал и решил благодаря сообществу.

Как правило, в Internet Explorer 8 и Internet Explorer 9 стили :active не применяются к меню. Должно стать темнее при нажатии. Пожалуйста, дайте мне знать, почему и как это исправить. Заранее спасибо.

Ответы [ 2 ]

5 голосов
/ 20 июня 2013

Просто ради актуальности и для того, чтобы никому не пришлось искать решение, я также обнаружил «ошибку» в IE <= 10, из-за которой нельзя применить стили к: active child, например; </p> 

a:active img {
    position:absolute;
    top:-30px;
}

Вышеуказанное не изменит положение изображения в IE <= 10, и в этом случае вам нужно будет применить: active к самому дочернему элементу; </p> 

a:active img,
a img:active {
    position:absolute;
    top:-30px;
}

, которыйв большинстве случаев это не идеальное решение, так как любой текст внутри якоря должен иметь более высокое значение z-index, чем изображение, а это означает, что изображение будет менять свою позицию только в зависимости от щелчка по изображению (при условии, что изображение: activeсостояние) ... что оставило меня в незначительной привязке, но тем не менее привязке (для решения только для css).

Так что, хотя это не исправление, это скорее примечание«предупреждение» для других о падении на: активный псевдо-селектор в IE.Мусор.= (

5 голосов
/ 08 апреля 2011

Псевдокласс: active применяется при элемент активируется пользователь. Например, между временами пользователь нажимает кнопку мыши и выпускает это. См. Документацию W3 .

Но вы применяете селектор :active к элементу <li>, , который не может иметь активное состояние, поскольку он никогда не активируется - только завис. Вы должны применить :active состояние к <a> <- верно для IE 6. </p>

ОБНОВЛЕНИЕ: Вот тестовый образец на jsFiddle , поскольку вы можете видеть, что он работает нормально на элементе <a>, но не работает на <li>

Интересная информация, которую я нашел здесь

Псевдокласс: active применяется во время ссылка выбирается пользователем.

CSS1 был немного двусмысленным в этом Поведение: «Активная» ссылка который в настоящее время выбирается (например, нажатием кнопки мыши) читатель. "Кроме того, в CSS1,: активный был взаимоисключающие от: ссылка и : Посетил. (И не было: hover псевдо-класс.)

CSS2 изменил вещи так, что правила для : active может применяться одновременно с : посетил или: ссылка. И поведение было объяснено немного лучше: : активный псевдокласс применяется в то время как элемент активируется пользователь. Например, между временами пользователь нажимает кнопку мыши и отпускает его. "

IMO, FF и другие лучше соответствуют CSS2 чем IE. Но так как ссылка предполагается чтобы загрузить новую страницу, IE мог законно сказать, что ссылка до сих пор "активный", пока новая страница загрузка, что и происходит.

Вы можете увидеть подобное нелогичное поведение в FF нажав на ссылку, но перемещая мышь от ссылки удерживая кнопка мыши вниз. Ссылка не активирован (новая страница не загружена), но ссылка остается в: active государство. С другой стороны, Chrome и Опера деактивирует ссылку, но на разные времена; Хром, как только мышь покидает область ссылок, Опера не пока кнопка мыши не отпущена. IE ведет себя так же, как FF в этом пример. (Нажмите Enter после перетаскивания отведите мышку от ссылки, и вы увидеть больше различий в поведении.)

Я бы не назвал ни одного из них отличия "жучки", из-за неясности в спецификации.

Единственное, что я могу предложить - это принять, что вы не можете контролировать каждый аспект поведения браузера. Пользователи разные браузеры имеют разные ожидания поведения, и если вы начать возиться с ожиданием пользователя, вы на неправильном пути.

...