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();}
пишет:
12 Мар 2009 в 11:32
1Про какие запреты на хаки вы говорите? В IE их можно отключать?
пишет:
12 Мар 2009 в 11:58
2Я имел в виду, что если заказчик, например, требует от вас валидный css и не хочет, чтобы там встречались вещи типа _background: #fff url (); /* сработает только для ie6 */. Это я и назвал «запретом на хаки». А отключать их или включать ни к чему, их можно либо использовать — либо нет. При их использовании css валидным не будет (помимо «безопасных» хаков). А конкретно для ie хакать css ни к чему, т.к. есть отличная альтернатива — conditional comments.
пишет:
27 Фев 2010 в 2:07
3по моему это не очень хороший вариант
.tool-button:hover {_background: transparent none;}
.tool-button:hover span {background: #eee url ();}
лучше .tool-button:hover {border:none}
и все остальное работает