IE6 BUG a:hover span

Вторник, 03 Фев 2009 18:17

В IE6 существует баг, когда при структуре типа <a><span>ТЕКСТ ССЫЛКИ</span></a> мы пытаемся сделать так, чтобы при a:hover изменялись стили span'a внутри ссылки, к примеру с него убиралось подчеркивание.

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

Лобовой подход типа a:hover span {text-decoration: none} работает во всех браузерах кроме IE6.

Написать уникальные css правила для всех браузеров так и не получилось, но существует следующее решение. Для IE6 либо в Conditional Comments либо отдельным листом стилей прописываем следующее:

a:hover {text-decoration: underline;}
a:hover span {text-decoration: none;}

Данные стили обеспечивают нужный эффект в IE6, но в нормальных браузерах в любом случае оставляют подчеркивание от <a> (родительского элемента) на <span>, потому использовать их нужно именно для IE6. Для остальных браузеров в css остается строчка из лобового подхода:

a:hover span {text-decoration: none}

Подключить свои стили для IE6 с помощью Conditional Comments можно так:

<!--[if IE 6]><style type="text/css">
a:hover {text-decoration: underline;}
a:hover span {text-decoration: none;}
</style><![endif]-->

Данную секцию нужно поместить в head вашей html-страницы.

Тоже работат и для, к примеру, button'ов со структурой типа:

<a href="#" class="tool-button">
<span class="tool-l"> </span>
<span class="tool-c">Add</span>
<span class="tool-r"> </span>
</a>

когда вы хотите при hover изменять, скажем, бэкграунд для спанов-блоков.
Для IE6, если нет запрета на хаки, в данном случае можно использовать комбинацию

.tool-button:hover {_background: transparent none;}
.tool-button:hover span {background: #eee url();}

Теги: 

http://blogto4ka.ru

RSS комментариев

3 комментария Комментировать

  1. Ademaro пишет:

    12 Мар 2009 в 11:32 Reply to this comment

    1

    Про какие запреты на хаки вы говорите? В IE их можно отключать?

  2. nikolas_sharp пишет:

    12 Мар 2009 в 11:58 Reply to this comment

    2

    Я имел в виду, что если заказчик, например, требует от вас валидный css и не хочет, чтобы там встречались вещи типа _background: #fff url (); /* сработает только для ie6 */. Это я и назвал «запретом на хаки». А отключать их или включать ни к чему, их можно либо использовать — либо нет. При их использовании css валидным не будет (помимо «безопасных» хаков). А конкретно для ie хакать css ни к чему, т.к. есть отличная альтернатива — conditional comments.

  3. alex пишет:

    27 Фев 2010 в 2:07 Reply to this comment

    3

    по моему это не очень хороший вариант

    .tool-button:hover {_background: transparent none;}

    .tool-button:hover span {background: #eee url ();}

    лучше .tool-button:hover {border:none}

    и все остальное работает

Оставьте свой комментарий о материале
(Комментарии со ссылками попадают на модерацию. Остальные не попадают, но я могу удалять те, которые посчитаю бесполезными, не несущими смысловой нагрузки)