сделать тег <hr>невидимым в IE6?

Question

Есть ли способ избавиться от границы элемента <hr> в IE6 без переноса его в другой элемент? Еще одно требование - это, к сожалению, отсутствие хаков.

Мне удалось сделать это для всех браузеров, стилизовав границу следующим образом:

hr.clear {
    clear: both;
    border: 1px solid transparent;
    height: 0px;
}

Тем не менее, IE6 по-прежнему отображает 1-пиксельную белую линию.

Answer 1

display: none не работает, потому что вы полностью удаляете <hr> из потока элементов. Это приводит к тому, что он перестает очищать ваши поплавки.

Если вы в порядке, полностью скрыв это, просто используйте visibility: hidden. Он по-прежнему очищает float, и это работает на всех IE:

hr {
    clear: both;
    visibility: hidden;
}

Answer 2

Итак, проблема в том, что IE не считает <hr> границы «границами». Если вы установите

border: 1px #f0f solid; 

... это добавит границу фуксии вокруг существующей скошенной границы. К счастью, Firefox и IE8 отображают это одинаково и понимают, что border: 0; означает, что я не хочу границы. К сожалению, IE 7 и более низкие версии этого не делают.

Итак, чтобы ответить на ваш вопрос ... нет ... нет способа избавиться от границы элемента <hr> в IE6 без переноса в другой элемент или взлом (я не нашел способ сделать это из моего опыта).

Вы можете либо обернуть <hr> в <div>, если у вас сплошной цвет фона, установить для свойства color значение свойства фона, либо использовать изображения для фона.

Вариант 1:

<div style="height:1px; background: transparent;">
    <hr style="display:none;" />
</div>

Вариант 2:

hr.clear {
    border: 0 none;
    height: 1px;
    color: #ffffff; /* if your bg is white, otherwise choose the right color */
}

Вариант 3 ... проверить это: http://blog.neatlysliced.com/2008/03/hr-image-replacement/

Извините, что IE (более старые версии) не играет по правилам. Надеюсь, это поможет.

Answer 3

Как насчет этого:

http://blog.neatlysliced.com/2008/03/hr-image-replacement/