Question

我用IE7遇到了这个非常奇怪的“bug”，我有很多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包装在一个显示器上：none hr：

的CSS：

.hr hr {
    display:none
}

HTML：

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

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

.ie7 .hr {width:100px}

使用此方法，您可以：

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

奇怪的IE7错误与浮动div中的小时宽度

1 个答案: