在浮动 div 中具有 hr 宽度的奇怪 IE7 错误答案

【问题标题】：Strange IE7 bug with hr width in a floated div在浮动 div 中具有 hr 宽度的奇怪 IE7 错误
【发布时间】：2011-11-08 12:04:58
【问题描述】：

我在 IE7 中遇到了这个非常奇怪的“错误”，我有很多 div.column 向左浮动，没有指定宽度。奇怪的是，在 IE7 中，hr 元素的宽度似乎占据了这些列容器的 100% 宽度。而且 hr 的 css 规则似乎没有很好地应用，背景 img 看起来很奇怪，边框似乎没有被删除：

hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}

<div class="column last">
    <div class="title">Useful info</div>
    <hr class="style3" />
    <ul class="links line_height3">
         <li>
             <a href="#">sample link</a>
         </li>
    </ul>
</div>

【问题讨论】：

<hr /> 的默认宽度为 100%。您没有为其设置宽度，因此默认为 100%。
但是由于它的容器是浮动的，它的100%宽度不应该是容器宽度吗？
无论如何，我也上传了测试文件来测试几种方法，有4列每列应该有hr（除了最后1是用于ie测试的），请先用Firefox查看，然后在IE7上查看（我用IE9、IE7浏览器和文档模式）vietlens.com/test.html

标签： html css internet-explorer-7

【解决方案1】：

tw16 建议 http://borgar.net/s/2007/01/style-hr-elements/ 这是一种非常酷的技术，但是由于某种原因，我无法使其适用于我的特定情况，也许我错过了一些东西。

无论如何，我选择使用 div 代替，但为了使其行为类似于 hr，我将这个 div 包裹在 display:none hr:

css:

.hr hr {
    display:none
}

html:

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

但是，如果您的 div.hr 位于浮动容器中（在我的情况下，它也在另一个浮动容器中），那么您可能必须为其分配固定宽度（仅适用于 IE7）。我使用modernizr插件所以我做了这样的事情：

.ie7 .hr {width:100px}

使用此方法，您可以：

使用背景图片等轻松设置“hr”样式，应该可以跨浏览器使用
仍将 hr 元素保留在您想要的位置，以便文本阅读器等可以看到它

【讨论】：