Тег <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:

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

Тест 2

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

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

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

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

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

* * *

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