Тег <hr /> и кроссбраузерный отступ
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются. Не знаю, почему я раньше не задавался целью найти ответ ...
Комментарии (26)
Фигасе…, сидел ведь еще вникал «в проблему», я лично этот hr уже очень давно не использую…, и без него можно прекрасно обойтись…
А что ты используешь для разделительных линий?
Да, достало постоянно модерировать отловленный спам. А с капчей этого не приходится делать.
Кстати говоря, я уж думал что 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 пикселей отступить?
а то с помоощью етих кодов не получается у меня !
Саша, если имеете в виду горизонтальные отступы, то делается это следующим образом:
hr {margin: 0 50px;}
Добавил в избраное, очень полезная инмормация, потому как я один из немногих кто использоует повсемесно
ДИВАН, под инновационными технологиями вы что конкретно подразумеваете?
rss читатель, на здоровье ;)
Спасибо за советы! Сделать что-то кроссбраузерно — это не так просто!
а как на счет такого решения:
hr, .hr { background-color: red; height: 1px; overflow: hidden; }
hr { behavior: expression (this.outerHTML = ''); }
тогда можно задавать любой margin: 1em — например
Спасибо! Выручил, но в ИЕ я все-таки переделал на дивы