Странная ошибка IE7 с hr шириной в плавающем div

Question

Я столкнулся с этой очень странной «ошибкой» в IE7, у меня осталось много файлов div.column, ширина не указана. Странно то, что в IE7 ширина элемента hr, кажется, занимает 100% ширины контейнера этих столбцов. Кроме того, правила css для hr, похоже, не применяются должным образом, фон 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}

С помощью этого метода вы можете:

1. Легко стилизуйте "hr" с фоновым изображением и т. Д., Что должно работать в разных браузерах
2. Все еще держите элемент hr там, где вы хотите, чтобы читатели текста могли видеть его