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]-->

我尝试过这个解决方案，但它似乎仍然有一个边框。

看起来像这样：

alt text 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

as

border:none

不是有效规则。

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

IE中的Hr Tag - 删除边框

4 个答案: