Все посты с тегом IE
ie6 и проблемы с :hover

Как всем известно ie6 не поддерживает в полной мере псевдокласс :hover. Для решения этой проблемы есть массивный скрипт под названием Whatever:hover. Суть скрипта такова подключаем 1 раз в стилях и забываем о проблеме. Но как выяснилось не все так гладко, в некоторых случаях (закономерность я так и не уловил) у элементов при наведении в ie6 менялись некоторые стили, хотя :hover для них вообще никак не был прописан. Во всем виноват оказался как раз тот самый Whatever:hover. Так что я не советую использовать данный скрипт для решения проблемы в 6 ослике.
Учим CSS, псевдо-класс first-child
Просматривая работы отечественных верстальщиков заметил, что мало кто использует в css псевдо-класс first-child. Хотя это очень полезная штука, которая может хоть немножко, но облегчить работу программистам и упростить html код. С помощью данного псевдо-класса можно задавать стили для первого дочернего элемента.
Рассмотрим пример. Требуется реализовать подобную навигацию:

Навигация реализуется в виде списка и для каждого элемента меню задается css свойство border-left. Но как видим выше у 1-го элемента не должно быть левого border'а. Первое, что приходит в голову добавить для 1-го элемента класс, но тогда на стороне сервера программисту вместо того чтобы просто сгенерировать меню, придеться искать еще и 1ый элемент и проставлять ему класс. Не будем мучить программиста
Все легко реализуемо через псевдо-класс first-child.
- ul li:first-child {border: 0;}
Все работает во всех актуальных браузерах, кроме ie6. В нем это легко реализуется с помощью expression.
- *html ul li {border-left-width: expression(this.previousSibling==null?'0':'1px');}
Лишние отступы у кнопок в IE
Кнопки с дефолтными стиля в браузерах смотрятся достаточно не красиво. Поэтому дизайнеры обычно меняют размеры и семейства шрифтом, а также внутренние отступы у кнопок.
Рассмотрим пример:
- <input type="button" style="padding: 3px 10px; font-size: 12px; font-family: Arial;" value="Сохранить?" />
В IE появляются лишние отступы у кнопок:

Исправляется этот баг CSS свойством overflow: visible
- <input type="button" style="padding: 3px 10px; font-size: 12px; font-family: Arial; overflow: visible;" value="Сохранить?" />


