Тег <hr /> и кроссбраузерный отступ
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются.
Не знаю, почему я раньше не задавался целью найти ответ на данный вопрос в виде кроссбраузерного решения, но недавно я все-таки сделал это.
На одном из англоязычных форумов я нашел информацию, которая гласила о том, что Internet Explorer делает размер отступа к тегу <hr /> больше ровно на 7 пикселей, чем другие браузеры.
Чтобы 100% убедиться в правдивости этих слов, я решил провести небольшой тест, который и подтвердил, что IE действительно добавляет к отступу от этого тега лишние ровно 7 пикселей.
Тест 1
Подготовлено специальное фоновое изображение с двумя линиями высотой в 7 пикселей и расстоянием между ними в 1 пиксель - место под линию, получаемую тегом <hr />. Для наглядность я поместил линию в div, которому указал границу серого цвета:
1 2 3 4 5 | div#hr { border: 1px solid silver; width: 300px; background: url(hr-bg.gif) 100% 0 no-repeat; } |
Задаем для тега <hr /> отступ сверху и снизу в размере 7 пикселей (margin: 7px 0):
1 2 3 4 5 6 7 | 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:
1 2 | * html hr {margin: 0; /* для IE6 */} *+html hr {margin: 0; /* для IE7 */} |
В результате получаем одинаковый отступ у тега <hr /> во всех браузерах:
Данный метод сработает также и в том случае, если задать для IE отрицательный отступ (на случай, когда в браузерах, отличных от IE, необходимо установить тегу <hr /> отступ меньше 7 пикселей).
Таким образом, применив этот небольшой трюк, мы “укротили” Internet Explorer, заставив его правильно позиционировать тег <hr />, аналогично другим браузерам.
* * *
Со временем мягкая мебель накапливает пыль, которая не под силу даже пылесосу. Услуга чистка мягкой мебели на дому поможет в такой ситуации избавиться от въевшейся пыли или грязных пятен.
Фигасе…, сидел ведь еще вникал “в проблему”, я лично этот hr уже очень давно не использую…, и без него можно прекрасно обойтись…
P.S.: А че капчу опять поставил?, спамеры надоели?
А что ты используешь для разделительных линий?
Да, достало постоянно модерировать отловленный спам. А с капчей этого не приходится делать.
Кстати говоря, я уж думал что hr давно упразднили.
c hr еще можно поиграться, например ( http://www.sovavsiti.cz/css/hr.html )
в качестве разделительных линий либо пользовался border у контентных блоков, либо отдельный пустой div с css .
Александр, он все еще жив :)
Во-первых, если у нас имеются 2 одинаково оформленных блока и между ними нужно вставить разделительную линию, то для одного из них придется использовать дополнительный класс, чтобы прописать border.
Во-вторых, семантически верно использовать тег hr вместо пустого дива.
Конечно, более семантично использовать 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 пикселей отступить ?
а то с помоощью етих кодов не получается у меня !
Саша, если имеете в виду горизонтальные отступы, то делается это следующим образом:
Добавил в избраное, очень полезная инмормация, потому как я один из немногих кто использоует повсемесно
ДИВАН, под инновационными технологиями вы что конкретно подразумеваете?
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 для верности), то ненужные отступы исчезают.
А можно сделать и без указания размера шрифта:
2
3
4
height: 1px;
oveflow: hidden;
}
Спасибо Максиму. Такую мелочь исправил, но все равно приятно )