html - float 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 包裹在 display:none hr:

CSS:

.hr hr {
    display:none
}

html:

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

但是，如果您的 div.hr 在一个 float 容器内(在我的例子中，它也在另一个 float 容器内)，那么您可能必须为其分配固定宽度(仅适用于 IE7)。我使用 modernizr 插件，所以我做了这样的事情:

.ie7 .hr {width:100px}

使用此方法，您可以:

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