Дата публикации: 09.08.2009
Проблема
IE6 не понимает псевдокласс first-child.
Решение — используем expression
Суть метода — скрипт при загрузке страницы, находит необходимый (первый) элемент и присваивает ему класс с необходимым оформлением.
<ul>
<li>Пункт первый</li>
<li>Пункт второй</li>
<li>Пункт третий</li>
</ul>
CSS:
li {
border-left: 1px solid #000;
display: inline;
margin-right: 10px;
}
li:first-child, li.first-child{
border: none;
}
* html li {
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */
)
}
Update! Иногда запись для ИЕ нужно изменить таким образом:
* html li {
z-index: expression(
runtimeStyle.zIndex = 1,
parentNode.firstChild ? (className += " first-child") : 0
)
}
Плюсы метода:
- достаточно прост и гибок
- оптимизированный expression отработает только один раз при загрузке страницы
- дает возможность оставить более чистый (без множества классов) код программистам и поисковым роботам
Недостатки:
- так же придется дополнительно подумать с динамически созданными элементами
- не проходит валидацию
Теги: псевдоклассы, баги IE6
Показать комментарии