Тег <hr /> и кроссбраузерный отступ

Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются.

Не знаю, почему я раньше не задавался целью найти ответ на данный вопрос в виде кроссбраузерного решения, но недавно я все-таки сделал это.

На одном из англоязычных форумов я нашел информацию, которая гласила о том, что Internet Explorer делает размер отступа к тегу <hr /> больше ровно на 7 пикселей, чем другие браузеры.

Чтобы 100% убедиться в правдивости этих слов, я решил провести небольшой тест, который и подтвердил, что IE действительно добавляет к отступу от этого тега лишние ровно 7 пикселей.

Тест 1

Подготовлено специальное фоновое изображение с двумя линиями высотой в 7 пикселей и расстоянием между ними в 1 пиксель — место под линию, получаемую тегом <hr />. Для наглядность я поместил линию в div, которому указал границу серого цвета:

div#hr {
	border: 1px solid silver;
	width: 300px;
	background: url(hr-bg.gif) 100% 0 no-repeat;
}

Задаем для тега <hr /> отступ сверху и снизу в размере 7 пикселей (margin: 7px 0):

hr {
	margin: 7px 0;
	height: 1px;
	border: none;
	background: #F00;
	color: #F00; /* цвет линии в IE */
}

Результат в Opera, FireFox, Safari/Win:

Отступ у тега hr в браузерах, отличных от IE

В Internet Explorer 6 и 7 мы видим совсем другую картину:

Отступ у тега hr в браузере Internet Explorer

Тест 2

Теперь уменьшим отступ в браузере Internet Explorer на заявленные выше 7 пикселей путем создания дополнительного правила только для IE:

* html hr {margin: 0; /* для IE6 */}
*+html hr {margin: 0; /* для IE7 */}

В результате получаем одинаковый отступ у тега <hr /> во всех браузерах:

Отступ у тега hr в браузерах, отличных от IE

Данный метод сработает также и в том случае, если задать для IE отрицательный отступ (на случай, когда в браузерах, отличных от IE, необходимо установить тегу <hr /> отступ меньше 7 пикселей).

Таким образом, применив этот небольшой трюк, мы «укротили» Internet Explorer, заставив его правильно позиционировать тег <hr />, аналогично другим браузерам.

* * *

Со временем мягкая мебель накапливает пыль, которая не под силу даже пылесосу. Услуга чистка мягкой мебели на дому поможет в такой ситуации избавиться от въевшейся пыли или грязных пятен.

Комментарии (26)
  1. 1
    Андрей

    Здравствуйте уважаемый, интересует такой вопрос:
    в чем заключается разница между «hr» и «hr /» ?

    сюдаже:
    a href=»ссылка»>
    a href=»ссылка» />
    a href=’ссылка’>
    a href=’ссылка’ />
    a href=ссылка>
    a href=ссылка />

    ?

  2. 2

    Андрей, в соответствии с XHTML-стандартном все непарные теги должны содержать в конце слеш через пробел.

  3. 3
    @

    Лично я использую hr (хоть и редко) в качестве разделителя или пустого дива со стилем clear: both.
    При этом, как правило я скрываю эту линию, а границы задаю дивам через border.
    Что касается «высоты» hr, то выяснилось, что она в какой-то мере зависит от font-size текста, в котором находится. Так например, если задать hr однопиксельный font-size (и line-height для верности), то ненужные отступы исчезают.

  4. 6
    Дархан

    Спасибо Максиму. Такую мелочь исправил, но все равно приятно )