浮動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元素保留在所需的位置，以便文本閱讀器等可以看到它