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

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

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

Комментарии (26)

  1. Фигасе…, сидел ведь еще вникал «в проблему», я лично этот hr уже очень давно не использую…, и без него можно прекрасно обойтись…

    P.S.: А че капчу опять поставил?, спамеры надоели?

  2. А что ты используешь для разделительных линий?

    P.S.: А че капчу опять поставил?, спамеры надоели?

    Да, достало постоянно модерировать отловленный спам. А с капчей этого не приходится делать.

  3. Кстати говоря, я уж думал что hr давно упразднили.
    c hr еще можно поиграться, например ( http://www.sovavsiti.cz/css/hr.html )

    в качестве разделительных линий либо пользовался border у контентных блоков, либо отдельный пустой div с css .

  4. Александр, он все еще жив :)

    в качестве разделительных линий либо пользовался border у контентных блоков, либо отдельный пустой div с css

    Во-первых, если у нас имеются 2 одинаково оформленных блока и между ними нужно вставить разделительную линию, то для одного из них придется использовать дополнительный класс, чтобы прописать border.

    Во-вторых, семантически верно использовать тег hr вместо пустого дива.

  5. Конечно, более семантично использовать hr — специлизированный тег.
    Однако из-за разницы отображения в разных броузерах hr — не самый любимый мой тег (впрочем посмотрим).
    css-ом можно поставить костыли и хаки (которые паталогически не люблю) или решить вопрос по-иному. Семантика при этом не страдает.
    навскидку — такие варианты (для контентных блоков): использовать :first-child (доп. классы не нужны, а вот с ИЕ «как обычно»)
    программно для первого элемента задать класс border и последнему не задавать (или прописать всем контентным блоком бордер и отбивку наверху, а первому noborder)
    ps> программно — js или серверным языком(php,asp и т.д.) — это то же костыль и разведение программного мусора
    pps> пустой разделительный див — это, конечно, ппц. такое я делал год-два назад. каюсь.

  6. Зачем изобретать велосипед? Есть масса способов избавиться от этого тега методами css.

  7. ElaSTiC какой здесь может быть велосипед, если hr — это стандартный хтмл-тег, предназначенный для вывода горизонтальной линии?

  8. Интересно, Билл Гейтс пользуется своим IE? )))

  9. Dimox, обычно обнуляю у всех элементов padding и margin, это ж обычная практика, и никаких проблем.

  10. Еще как вариант использовать отрицательный маргины. Yuriy, в ie обнуление для hr не срабатывает.

  11. Я не успел… lusever сказал то, что я хотел сказать про IE.

  12. То есть проблема некорректного отображения в ИЕ решается таким образом? Вы мой спаситель!!!

  13. Amiego, да, именно таким образом и решается.

  14. А как зделать так что бы допустим от центра 50 пикселей отступить ?
    а то с помоощью етих кодов не получается у меня !

  15. Саша, если имеете в виду горизонтальные отступы, то делается это следующим образом:


    hr {margin: 0 50px;}

  16. Добавил в избраное, очень полезная инмормация, потому как я один из немногих кто использоует повсемесно

  17. ДИВАН, под инновационными технологиями вы что конкретно подразумеваете?

    rss читатель, на здоровье ;)

  18. Спасибо за советы! Сделать что-то кроссбраузерно — это не так просто!

  19. а как на счет такого решения:
    hr, .hr { background-color: red; height: 1px; overflow: hidden; }
    hr { behavior: expression( this.outerHTML = » ); }

    тогда можно задавать любой margin: 1em — например

  20. Спасибо! Выручил, но в ИЕ я все таки переделал на дивы