hr元素vs 1px高div vs 1px边框

Question

我有一个应用程序有部分，我需要一个1px行之间。看起来我有一个选择：

1. hr元素。

2. 带有1px边框的div。

3. div是一个像素高，并具有背景色。

见example

.hr1{ 
    border-bottom: 1px solid; 
} 

.hr2{ 
    height:1px; 
    background-color:black; 
} 

是否有一个特定的方式什么好处？

在我看来hr元素不是一个好主意，因为造型可能会变得太容易。

Answer 1

是的，使用合适的hr元素有一个压倒性的优势：它可以被基于文本的浏览器和屏幕阅读器所理解。

对于不使用普通浏览器的用户，根本不会显示空的div，无论是否存在边框。一个hr永远会。它可能需要这样做。

更多信息，请on this accessibility site，这也指出了时候，你需要使用其他的东西比一个建议的hr：

<div class="rule"></div><hr> 

div.rule { 
    height: 1px; 
    background: blue; 
} 
hr { 
    display: none; 
} 

Answer 2

要添加到@ lonesomeday的答案：正确使用的HR元素对屏幕阅读器和基于文本的浏览器非常重要。这个例子是从规范给出的：

可以使用hr元素标记的主题中断的一些示例包括故事中的场景更改或者在参考书的一部分内转换到另一个主题。

问题中的用例是表示性的，而不是专题性的。所以它不会给基于文本的浏览器或屏幕阅读器带来益处。所以在这种情况下不应该使用hr元素。