Тег 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;
@ 22 Октября 2008 в 20:44
2 Дядя Миша:
Рад что Вы вернулись, а то я уже стал думать, что такой полезный ресурс загнулся. Ждемс интересных статей!
@ 24 Октября 2008 в 16:34
Это почему же для IE6 нельзя указать отступ? Можно. Только нужно учитывать, что в IE6 и IE7 он на 7 пикселей больше, чем в остальных браузерах.
@ 24 Октября 2008 в 21:55
Dimox в том то и дело, а хаки я не люблю использовать и еще не известно, что будет в IE8, поэтому обхожусь без margin.
@ 09 Декабря 2008 в 15:55
А что еще IE так популярен и будет IE8?
@ 11 Декабря 2008 в 09:08
А что вы не знаете, что MS уже бету тестируют IE 8?
@ 04 Февраля 2009 в 12:00
<blockquote>в том то и дело, а хаки я не люблю использовать</blockquote>
Conditional Comments ещё никто не отменял. Я про стилизацию hr тоже писал и дополнял строчкой для IE: margin-bottom: -7px.
@ 16 Июля 2009 в 11:14
Хм... спасибо за советы - очень пригодилось, в CSS я пока еще просто-таки плаваю
@ 17 Февраля 2010 в 17:27
Проблема отступа решается очень просто..
ставите библиотеку jQuery
и код
[code]<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>[/code]
ну собственно тут можно уже чего угодно напридумывать.
@ 16 Апреля 2010 в 09:17
Штриховой вариант, канает в IE6, IE8, Firefox, осталные не тестил:
hr {
color: #999;
border: 0px none;
border-top: dashed 1px #999;
height: 1px;
}
@ 18 Марта 2012 в 14:38
Спасибо! Поставил у себя на сайте ("clear:both" правда, пришлось убрать, а то всё съезжает далеко вниз). Теперь горизонатальные разделители во всех браузерах выглядят одинаково. Я сколько с этим мучился!