使 <hr> 标签在 IE6 中不可见？答案

【问题标题】：make <hr> tag invisible in IE6?使 <hr> 标签在 IE6 中不可见？
【发布时间】：2013-09-14 23:55:54
【问题描述】：

有没有办法摆脱 IE6 中 <hr> 元素的边框而不将其包装在另一个元素中？不幸的是，另一个要求是没有黑客攻击。

我已经设法为所有浏览器设置了边框样式：

hr.clear {
    clear: both;
    border: 1px solid transparent;
    height: 0px;
}

然而 IE6 仍然呈现 1 像素的白线。

【问题讨论】：

【解决方案1】：

display: none 不起作用，因为您正在从元素流中完全删除 <hr>。这会导致它停止清除您的浮动。

如果您可以完全隐藏它，只需改用visibility: hidden。它仍然会清除浮动，这适用于所有 IE：

hr {
    clear: both;
    visibility: hidden;
}

【讨论】：

【解决方案2】：

所以问题是IE不认为<hr>边框是“边框”。如果你设置了

border: 1px #f0f solid;

...它将在现有的斜面边框周围添加一个紫红色边框。幸运的是，Firefox 和 IE8 呈现相同的内容并意识到 border: 0; 意味着我不想要边框。不幸的是，IE 7 和更低版本不这样做。

所以要回答你的问题... 否...没有办法摆脱 IE6 中 <hr> 元素的边框将其包装在另一个元素中或对其进行破解（根据我的经验，我还没有找到这样做的方法）。

您的选择是将<hr> 包裹在<div> 中，如果您有纯色背景色，请将color 属性设置为背景色，或者使用图像作为背景。

选项 1：

<div style="height:1px; background: transparent;">
    <hr style="display:none;" />
</div>

选项 2：

hr.clear {
    border: 0 none;
    height: 1px;
    color: #ffffff; /* if your bg is white, otherwise choose the right color */
}

抱歉，IE（旧版本）不遵守规则。我希望这会有所帮助。

【讨论】：

【解决方案3】：

这个怎么样：

【讨论】：