Корректное отображение hr в ie
Сделать разделитель (hr) того цвета, который нам нужен достаточно просто при помощи css. Об этом уже достаточно говорилось (хотя бы в Кулинарных рецептах Вебмаскона)
Обычно, если мне необходимо сделать разделитель красного цвета и высотой в один пиксель поступаю следующим образом:
hr {
height:1px;
border: 0 none;
color:red;
background-color:red;
}
Но, не все так прекрасно, как хотелось бы. Появляется отcтуп в IE, даже если обнулять margin и padding (правило хорошего тона, вначале css-документа обнулять отступы при помощи универсального селектора -*{margin:0; padding:0;} ) В других браузерах он выглядит нормально. Вот пример.
Откуда IE берет 7px сверху и снизу остается загадкой, как и то, что если попытаться побороть все это безобразие при помощи float, то снизу появится отступ в уже в два раза больше.
Странное поведение для строчного элемента, именно так IE определяет hr остается загадкой (по крайней мере для меня). Чтож, раз так ведет себя строчный элемент, то как выход прeобразовать блочный и избавимся от 7px :
hr {
height:1px;
border: 0 none;
color:red;
display:block;
$margin:-7px 0;/*for all ie*/
background-color:red;
}
О, вот и желаемый результат!
Конечно лучше воспользоваться conditional comments и вынести $margin:-7px 0; в отдельный стилевой файл для IE. Но, если не интересует валидность css, то можно обойтись и так.
Чтож, теперь все впорядке и работает в популярных браузерах.(Не проверялось в Safari и MacIE)
таги: css hacks IE