Укладка горизонтальных правил
Есть ли более приятный способ стилизации тега <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>
Ответы 3
Если вы установите для дисплея block, он должен вести себя как <div>.
Ваш ответ: вы должны полностью удалить hr и просто использовать div
Я склонен соглашаться с Nickf в этом, это в содержании по какой-то причине. Однако установка его на отображение блока может стоить внимания.
Вы можете применить фоновое изображение к нижней части предыдущего элемента, возможно, с небольшим дополнительным отступом. Таким образом вы сможете избавиться от лишней / несемантической разметки.
Классический способ сделать это - создать оболочку вокруг <hr> и стилизовать ее. Но я придумал трюк с 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;
}
См. запись в моем блоге для получения дополнительной информации и примера трюка в действии.
Это здорово, +10, если бы я мог!
я не согласен. Горизонтальная линейка, хотя якобы визуальный элемент, все же несет семантическое значение, тогда как div - нет.