hr元素vs 1px高div与1px边界

Question

我有一个应用程序,它有部分,我需要它们之间的1px线.看来我有一个选择:

1. 一个hr元素.

2. 带有1px边框的div.

3. div是一个像素高,并具有背景颜色.

见例子

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

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

一种特定方式有什么好处吗？

在我看来,hr元素不是一个好主意,因为样式可能很容易改变.

Answer 1

是的,使用正确的hr元素有一个压倒性的优势:基于文本的浏览器和屏幕阅读器可以理解它.

对于不使用普通浏览器的人,div根本不显示空白,是否有边框.一个hr总是会.这样做可能是可取的.

有关此辅助功能站点的更多信息,此处还提供了有关您需要使用以下内容以外的其他内容的建议hr:

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

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