Hr Tag в IE - убрать границу

Question

В других браузерах, кроме IE7 и ниже, hr отображает границу вокруг тега hr, чего я не хочу.

<!--[if lte IE 7]>
<style type="text/css">
hr {
    margin: -3px 0 0 0;
    padding: 0;
    height: 19px;
    border: none;
    outline: none;
    background: url("img/split.png") center no-repeat;
}
</style>
<![endif]-->

Я пробовал это решение, но оно все еще имеет границу.

Это выглядит так:

альтернативный текст http://i46.tinypic.com/dpdabm.jpg

Как мне от этого избавиться?

Answer 1

См. http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

Кажется, что нет хорошего способа обойти эту проблему, только с помощью хака (используя окружающий div).

Answer 2

Чтобы избежать этих проблем, вместо этого вы можете использовать теги DIV. Чтобы сделать его доступным, поместите HR внутри так:

<div class="ruler"><hr /></div>

затем примените к нему стили:

.ruler { border-top: 1px solid black; }

.ruler hr { display: none; }

Это скроет HR и сделает DIV "горизонтальной линейкой".

Answer 3

Различные браузеры имеют разные модели для элемента 'hr'. Вот почему я использую это:

hr {
 height: 1px;
 color: #ccc;
 background-color: #ccc;
 border: 0;
}

Это работает во всех основных браузерах. Есть только одна проблема: IE7 и поля ...

Answer 4

Использовать только

border:0px 

как

border:none 

не является действительным правилом.

http://www.w3schools.com/cssref/pr_border-style.asp