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

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

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

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

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

Тест 1

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

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

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

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

Тест 2

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

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

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

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

* * *

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