Стилизация тега HR с помощью CSS
Дизайн состоит из мелочей! Улучшайте дизайн, работая над его отдельными элементами. Поэтому предлагаю вам оптимальный вариант стилизации разделителя HR с помощью CSS, который подойдёт для большинства современных (и не очень) браузеров: Internet Explorer, Firefox, Opera, Safari и т. д.
Свойства тега HR интерпретируются браузерами по разному. С появлением полноценной поддержки CSS, эта проблема ушла на второй план. Приведённый ниже пример стилизует разделитель как линию высотой в 1 пиксель и с одинаковым цветом для всех браузерах.
hr { color: #555; /* для IE */ background-color:#555; /* для Firefox, Opera, Safari */ border:0 none; height:1px; /* высота 1px IE, Firefox, Opera, Safari */ clear:both; /* для «очистки», если тег идет после элемента с float */ }
Есть ещё и проблема с внешним отступом у разделителя в браузере Internet Explorer 6. Найти её решение мне не удалось. Разве что использовать внешнюю обёртку, можно даже с внутренним отступом, например:
<div style="padding: 5px 0"><hr/></div>
В остальных браузерах можно использовать CSS-свойство margin
, например:
margin: 5px 0;
Честно говоря, найти практического применения тегу HR — сложно. Хотя бы потому, что для всегда можно задать границу для того или иного элемента используя CSS-свойство border
. но тем не менее: Тем не менее, если используете этот разделитель на сайте — теперь вы знаете как его можно стилизовать средствами CSS. На этом у меня всё. Спасибо за внимание. Удачи!
Короткая ссылка: http://goo.gl/tKgnmJ