风格水平规则

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

这样做的经典方式是围绕<小时>创建一个包装和样式。但我已经想出了图像的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>。

你的回答，你应该完全取消小时，只使用div

Answer 3

你可以将背景图像应用到前一元素的底部，也许有点微胖的。这样你就可以摆脱任何多余/非语义标记。