Стилизация тега HR с помощью CSS для всех браузеров (IE, Firefox, Opera, Safari)

Тег HR является довольно старым элементом HTML, до появления CSS ему можно было назначить толщину (size) и ширину (width), но он все равно по разному отображался в браузерах. Теперь, когда все известные браузеры хорошо поддерживают CSS я расскажу, как можно придать эстетический вид этому полезному тегу, чтобы он выглядел тонкой линией высотой 1px и одинакового цвета во всех браузерах.

html код:

<hr />

css код:

hr { color: #555; /*для IE */ background-color:#555; /*для Firefox, Opera, Safari*/ border:0px none; height:1px; /* высота 1px IE, Firefox, Opera, Safari */ clear:both; /* для очистки, если тег идет после float елемента */ }

Единственный недостаток, в том что нельзя указать отступ сверху и отступ снизу для IE 6, а вот для Firefox, Opera, Safari можно использовать margin:5px 0; или margin:5px 0 8px 0;

Поделись с друзьями:
Комментарии

2 Mike:
Рад что Вы вернулись, а то я уже стал думать, что такой полезный ресурс загнулся. Ждемс интересных статей!

Это почему же для IE6 нельзя указать отступ? Можно. Только нужно учитывать, что в IE6 и IE7 он на 7 пикселей больше, чем в остальных браузерах.

Dimox в том то и дело, а хаки я не люблю использовать и еще не известно, что будет в IE8, поэтому обхожусь без margin.

А что еще IE так популярен и будет IE8?

А что вы не знаете, что MS уже бету тестируют IE 8?

в том то и дело, а хаки я не люблю использовать

Conditional Comments ещё никто не отменял. Я про стилизацию hr тоже писал и дополнял строчкой для IE: margin-bottom: -7px.

Хм... Спасибо за советы - очень пригодилось, в CSS я пока плаваю.

Проблема отступа решается очень просто: ставите библиотеку jQuery и пишете код:

<script type="text/javascript">
jQuery(document).ready(function(){
	$("hr").replaceWith("<table cellpadding=0 cellspacing=0 style=\"margin: -12 0 0 0; width: 100%; height: 1px; background-color: #c5c5c5;\"><tr><td></td></tr></table>");
});
</script>

Штриховой вариант, канает в IE6, IE8, Firefox, остальные не тестил:

hr {
color: #999;
border: 0px none;
border-top: dashed 1px #999;
height: 1px;
}

Спасибо! Поставил у себя на сайте ("clear:both" правда, пришлось убрать, а то всё съезжает далеко вниз). Теперь горизонатальные разделители во всех браузерах выглядят одинаково. Я сколько с этим мучился!

Аватар пользователя Александр Альпидовский

Спасибо огромное! Выручили Вы меня. Никак не мог вспомнить, как стилизовать у себя в блоге HR по нормальному, а тут всё как надо.