造型横向规则

Question

使用CSS设置<hr />标记是否有更好的方法，即跨浏览器一致且不涉及在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

这样做的经典方法是在＆lt; hr＆gt;周围创建一个包装器。和造型。但我已经提出了一个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;
}

有关详细信息，请参阅entry on my blog以及实施技巧的示例。

Answer 2

如果您将显示设置为block，则其行为应该更像<div>。

您的答案应该完全删除hr并使用div

Answer 3

您可以将背景图像应用于前一个元素的底部，可能需要一些额外的填充。这样你就可以摆脱任何剩余/非语义标记。