Кроссбраузерный <hr />
Дата публикации: 31.01.2009
Последнее обновление: 02.12.2009
Горизонтальная линия (тег <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%; /* плавающие элементы обязательно должны иметь явно указанную ширину */ }
update: 2.12.09 — Чтобы задать одинаковый цвет для hr, можно воспользоваться и таким способом:
hr { height: 1px; border: none; border-top: 1px solid #000; }
По умолчанию hr имеет выравнивание по центру. Выровнять влево/вправо не так очевидно как казалось.
Выравнивание hr влево
hr { height: 1px; border: none; width: 50%; text-align: left; /* для ie */ margin: 0 auto 0 0; /* для остальных браузеров */ }
Выравнивание hr вправо
hr { height: 1px; border: none; width: 50%; text-align: right; /* для ie */ margin: 0 0 0 auto; /* для остальных браузеров */ }
Бордюр для hr
hr может выглядеть не только сплошной линией, например, она может быть пунктирной:
hr { height: 1px; border: none; width: 50%; border-top: 1px dotted #000; }
Background для hr
hr { height: 1px; border: none; background: url(path-to/hr.png) no-repeat; }
Все просто, за одним исключение — это не работает в IE. Поэтому приходится использовать <div>:
.line { height: 1px; border: none; background: url(path-to/hr.png) no-repeat; overflow: hidden; /* для ie6, чтобы высота блока была 1px */ }
Проверено в:
Материалы
Теги: CSS приемы