造型横向规则

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

这样做的经典方法是在<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;
}

请参阅我的博客上的条目以获取更多信息以及操作技巧的示例.