样式化水平规则答案

【问题标题】：Styling horizontal rules样式化水平规则
【发布时间】：2010-09-18 02:30:14
【问题描述】：

有没有更好的方式使用 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>

【问题讨论】：

标签： html css

【解决方案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 了解更多信息和实际操作示例。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：