Стиль горизонтальных правил

Question

Есть ли более приятный способ стилизации тега <hr /> с использованием CSS, который является кросс-браузерным и не предполагает обтекания div вокруг него? Я изо всех сил пытаюсь найти один.

Лучший способ, который я нашел, заключается в следующем:

CSS

.hr {  
    height:20px;  
    background: #fff url(nice-image.gif) no-repeat scroll center;  
}  
hr {  
    display:none;  
}

HTML

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

Answer 1

Классический способ сделать это - создать обертку вокруг

---

и стилизовать ее. Но я придумал CSS-трюк для замены изображения элемента без необходимости дополнительной разметки:

Для браузеров не MSIE:

hr {
   border : 0;
   height : 15px;
   background : url(hr.gif) 0 0 no-repeat;
   margin : 1em 0;
 }

Дополнительно для MSIE:

hr {
   display : list-item;
   list-style : url(hr.gif) inside;
   filter : alpha(opacity=0);
   width : 0;
}

См. запись в моем блоге для получения дополнительной информации и примера уловки в действии.

Answer 2

Вы можете применить фоновое изображение к нижней части предыдущего элемента, возможно, с небольшим дополнительным заполнением. Таким образом, вы можете избавиться от любой лишней / несемантической разметки.

Answer 3

Если вы установите дисплей на block, он должен вести себя как <div>.

Ваш ответ вы должны удалить hr в целом и просто использовать div