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

Question

我在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>

Answer 1

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

无论如何，我选择改用div，但为了使其行为类似于hr，我将此div环绕在显示器周围：无hr：

CSS：

.hr hr {
    display:none
}

的HTML：

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

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

.ie7 .hr {width:100px}

使用此方法，您可以：

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