水平线的样式设计

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>

- Pickledegg

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;
}

请查看我的博客文章，了解更多信息和此技巧的示例。

- Borgar

---

太棒了，如果可以的话加10分！ - Skilldrick

Answer 2

如果你将 display 设置为 block，它应该更像一个 <div>。

你的答案应该完全删除 hr 并只使用 div。

- vfilby

---

我不同意。虽然水平线表面上是一个视觉元素，但仍具有语义含义，而 div 则没有。 - nickf

我倾向于同意nickf的观点，这是有原因的内容。然而，将其设置为display:block可能值得一试。 - Chris J Allen

Answer 3

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

- Ian Oxley