Стилизация тега 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;
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Антон
22.10.2008
Постоянная ссылка (Permalink)
2 Mike:
Рад что Вы вернулись, а то я уже стал думать, что такой полезный ресурс загнулся. Ждемс интересных статей!
Dimox
24.10.2008
Постоянная ссылка (Permalink)
Это почему же для IE6 нельзя указать отступ? Можно. Только нужно учитывать, что в IE6 и IE7 он на 7 пикселей больше, чем в остальных браузерах.
Mike Khasaya
24.10.2008
Постоянная ссылка (Permalink)
Dimox в том то и дело, а хаки я не люблю использовать и еще не известно, что будет в IE8, поэтому обхожусь без margin.
Кирилл
09.12.2008
Постоянная ссылка (Permalink)
А что еще IE так популярен и будет IE8?
Вася
11.12.2008
Постоянная ссылка (Permalink)
А что вы не знаете, что MS уже бету тестируют IE 8?
Никита
04.02.2009
Постоянная ссылка (Permalink)
Conditional Comments ещё никто не отменял. Я про стилизацию hr тоже писал и дополнял строчкой для IE: margin-bottom: -7px.
Натали
16.07.2009
Постоянная ссылка (Permalink)
Хм... Спасибо за советы - очень пригодилось, в CSS я пока плаваю.
Алексей
17.02.2010
Постоянная ссылка (Permalink)
Проблема отступа решается очень просто: ставите библиотеку jQuery и пишете код:
Senya
16.04.2010
Постоянная ссылка (Permalink)
Штриховой вариант, канает в IE6, IE8, Firefox, остальные не тестил:
Гавриил
18.03.2012
Постоянная ссылка (Permalink)
Спасибо! Поставил у себя на сайте ("clear:both" правда, пришлось убрать, а то всё съезжает далеко вниз). Теперь горизонатальные разделители во всех браузерах выглядят одинаково. Я сколько с этим мучился!
Александр Альпи...
22.02.2014
Постоянная ссылка (Permalink)
Спасибо огромное! Выручили Вы меня. Никак не мог вспомнить, как стилизовать у себя в блоге HR по нормальному, а тут всё как надо.