我想让一些内容对屏幕阅读器可用，但在页面上不可见。把它从页面上取下来会导致屏幕阅读器不显示它，所以我使用了一个常见的破解方法，sr-only类，例如Bootstrap使用的。下面是Kitty Giraudel的版本:
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
问题是position: absolute规则，它需要一个具有position: relative的父规则。如果没有它，不可见的内容可能会在页面底部结束，并导致浏览器添加滚动条。我不喜欢在sr-only类之上添加position: relative规则。它很容易被遗忘或不小心被拿走。如果添加类是唯一需要的步骤，则会更容易，这似乎可以通过简单地将top: 0添加到这些规则中。但我对这么古老的智慧有点紧张。为什么不经常这样做呢?我是否错过了top: 0的潜在问题?
简短回答
不，不使用top: 0
长回答
首先，你在评论中链接的问题是使用一个非常破碎的(据我所知是旧的)屏幕阅读器类，我认为它已经更新了(如果没有，那么这只是加强了我对使用字体Awesome的看法!🤣)。
您链接的屏幕阅读器类与我创建/使用的视觉隐藏文本类相同(这只是显示如果我们两个人提出相同的事情，它可能是正确的!)，并且不应该导致使用clip-path: inset(50%)所描述的问题。
clip-path: inset(50%)有效地使元素高0px宽0px，所以你应该不会得到任何溢出问题，因为它。
滚动条问题往往是由margin: -1px部分引起的(你注意到我们没有在我们的类中使用)，但没有东西来测试，我无法确认这里的情况。
关于添加top: 0不要这样做-你不与古老的智慧混淆确实是明智的。
当你开始移动元素的位置时，一些屏幕阅读器会尝试补偿定位(认为你是一个糟糕的开发人员，使用绝对定位来改变页面上事物的顺序，而不是改变DOM顺序)，导致奇怪的阅读顺序。
我已经使用我链接的类2年了，现在没有看到任何意外的滚动条，所以你应该是安全的。
话虽如此，如果你确实设法把codepen/fiddle等放在一起，证明了我推荐的课程或你问题中的课程所描述的问题，那么请告诉我，因为这是我想要解决的问题!
最终想法
在你在注释中链接的bug报告中，不要按照最后一条消息的建议去做:
- 将元素的大小设置为0xN或Nx0(例如"width: 0"或类似)。
- 设置元素"display: none"
- 将元素用0x0div包围，该div也是"position: absolute"
以上三个选项将使文本对屏幕阅读器用户完全不可见(从可访问性树中删除该元素)，并且完全打破了使用仅屏幕阅读器类的要点。
选项4和5是可行的选项:
- Make "viewport- router_quot;包含块(例如"position: relative"或类似)。
- 更改"viewport-main"到"overflow-y: hidden"或类似的。