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
精彩评论