Hr Tag in IE - remove border

In other browsers except IE7 and lower the hr displays a border around the hr tag which I don't want it to.

<!--[if lte IE 7]>
<style type="tex开发者_如何学Pythont/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]-->

I've tried this solution, but it still appears to have a border around it.

It looks like this:

How do I get rid of it?

---

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

It seems that there is no good way around this problem, only with a hack (using a surrounding div).

---

To avoid these problems, you could use DIV tags instead. In order to make it accessible, put an HR inside like this:

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

then apply styles to it:

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

.ruler hr { display: none; }

This will hide the HR and make the DIV a "horizontal ruler".

---

Different browsers have different models for the 'hr' element. That's why I use this:

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

This works across all major browsers. There is only one problem: IE7 and margins...

---

Use only

border:0px 

as

border:none 

is not a valid rule.

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