Question

我有一个应用程序，它有部分，我需要它们之间的1px线。我似乎有一个选择：

一个hr元素。
边框为1px的div。
一个像素高的div，具有背景色。

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

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

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

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

Answer 1

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

对于不使用普通浏览器的人，空的hr根本不会显示，是否有边框。总是会hr。它可能是可取的。

我们提供了更多信息on this accessibility site，其中还提到了当您需要使用<div class="rule"></div><hr>以外的其他内容时的建议：

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

import requests
from bs4 import BeautifulSoup
r = requests.get('http://www.metal-archives.com/lists/A')
soup = BeautifulSoup(r.content, 'lxml')

print([a.text for a in soup.select('td.sorting_1 a')])

Answer 2

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

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

问题中的用例是表示性的，而非主题性的。因此，它不会为基于文本的浏览器或屏幕阅读器带来好处。因此，在这种情况下不应使用hr元素。

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

2 个答案: