Тег <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 />, аналогично другим браузерам.
* * *
Со временем мягкая мебель накапливает пыль, которая не под силу даже пылесосу. Услуга чистка мягкой мебели на дому поможет в такой ситуации избавиться от въевшейся пыли или грязных пятен.
Смотрите также
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Верстаем кроссбраузерный "резиновый" макет страницы
Как вы уже могли заметить, страницы моего блога некоторое время назад стали “резиновыми”. Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
Комментарии (26)
Конечно, более семантично использовать hr – специлизированный тег.
Однако из-за разницы отображения в разных броузерах hr — не самый любимый мой тег (впрочем посмотрим).
css-ом можно поставить костыли и хаки (которые паталогически не люблю) или решить вопрос по-иному. Семантика при этом не страдает.
навскидку – такие варианты (для контентных блоков): использовать :first-child (доп. классы не нужны, а вот с ИЕ “как обычно”)
программно для первого элемента задать класс border и последнему не задавать (или прописать всем контентным блоком бордер и отбивку наверху, а первому noborder)
ps> программно – js или серверным языком(php,asp и т.д.) — это то же костыль и разведение программного мусора
pps> пустой разделительный див – это, конечно, ппц. такое я делал год-два назад. каюсь.
Зачем изобретать велосипед? Есть масса способов избавиться от этого тега методами css.
ElaSTiC какой здесь может быть велосипед, если hr – это стандартный хтмл-тег, предназначенный для вывода горизонтальной линии?
Интересно, Билл Гейтс пользуется своим IE? )))
Dimox, обычно обнуляю у всех элементов padding и margin, это ж обычная практика, и никаких проблем.
Еще как вариант использовать отрицательный маргины. Yuriy, в ie обнуление для hr не срабатывает.
Я не успел… lusever сказал то, что я хотел сказать про IE.
То есть проблема некорректного отображения в ИЕ решается таким образом? Вы мой спаситель!!!
Amiego, да, именно таким образом и решается.
А как зделать так что бы допустим от центра 50 пикселей отступить ?
а то с помоощью етих кодов не получается у меня !
Саша, если имеете в виду горизонтальные отступы, то делается это следующим образом:
hr {margin: 0 50px;}
Добавил в избраное, очень полезная инмормация, потому как я один из немногих кто использоует повсемесно
ДИВАН, под инновационными технологиями вы что конкретно подразумеваете?
rss читатель, на здоровье ;)
Спасибо за советы! Сделать что-то кроссбраузерно – это не так просто!
а как на счет такого решения:
hr, .hr { background-color: red; height: 1px; overflow: hidden; }
hr { behavior: expression( this.outerHTML = ” ); }
тогда можно задавать любой margin: 1em – например
Спасибо! Выручил, но в ИЕ я все таки переделал на дивы
Здравствуйте уважаемый, интересует такой вопрос:
в чем заключается разница между “hr” и “hr /” ?
сюдаже:
a href=”ссылка”>
a href=”ссылка” />
a href=’ссылка’>
a href=’ссылка’ />
a href=ссылка>
a href=ссылка />
?
Андрей, в соответствии с XHTML-стандартном все непарные теги должны содержать в конце слеш через пробел.
Лично я использую hr (хоть и редко) в качестве разделителя или пустого дива со стилем clear: both.
При этом, как правило я скрываю эту линию, а границы задаю дивам через border.
Что касается “высоты” hr, то выяснилось, что она в какой-то мере зависит от font-size текста, в котором находится. Так например, если задать hr однопиксельный font-size (и line-height для верности), то ненужные отступы исчезают.
А можно сделать и без указания размера шрифта:
Меня верхний margin не нравиться. Хотя если подымать просто вверх её и -14 снизу. хмм….. сейчас попробуем ))
Спасибо Максиму. Такую мелочь исправил, но все равно приятно )