Стилизация тега 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