IE 中的 Hr 标签 - 删除边框答案

【问题标题】：Hr Tag in IE - remove borderIE 中的 Hr 标签 - 删除边框
【发布时间】：2019-07-28 21:06:08
【问题描述】：

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

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

看起来像这样：

我该如何摆脱它？

【问题讨论】：

“新闻”？这看起来像一个标题，所以只需将背景应用到它的顶部，或者它之前的元素的底部。
我也会投票反对将 HR-s 用于此类解决方案。

标签： html css internet-explorer

【解决方案1】：

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

似乎没有什么好的方法可以解决这个问题，只能通过 hack（使用周围的 div）。

【讨论】：

这里提供了一些解决方案：*.com/questions/1070682/…

【解决方案2】：

为避免这些问题，您可以改用 DIV 标签。为了使其易于访问，请像这样在里面放置一个 HR：

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

然后对其应用样式：

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

.ruler hr { display: none; }

这将隐藏 HR 并使 DIV 成为“水平尺”。

【讨论】：

【解决方案3】：

不同的浏览器对 'hr' 元素有不同的模型。这就是我使用它的原因：

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

这适用于所有主要浏览器。只有一个问题：IE7和margins...

【讨论】：

【解决方案4】：

仅供参考

border:0px

作为

border:none

不是一个有效的规则。

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

【讨论】：