Главная/ HTML и CSS приемы | Обходим баги, находим интересные решения/ Css Tricks/ Кроссбраузерный <hr /> | толщина линии, цвет, отступы

Проблема

Горизонтальная линия (тег <hr />) в различных браузерах отображается по разному (цвет, толщина, отступы).

Решение

Для устранения этих проблем используем CSS код:


hr {
height: 1px;
border: none;
color: #ff0000;
background: #ff0000;
margin: 0; /* устраняем начальный отступ для всех браузеров (в ие6 не работает) */
}
* html hr {
/* хак для ие6 */
margin: -7px 0; /* устраняем начальный отступ для ие6 */
}

Для избежания хака и отдельного CSS для IE6 можно воспользоваться свойством float для hr:


hr {
height: 1px;
border: none;
color: #ff0000;
background: #ff0000;
margin: 0;
float: left; /* чтобы в IE6 устранить отступ по умолчанию */
width: 100%; /* плавающие элементы обязательно должны иметь явно указанную ширину */
}
Теги: CSS приемы