为什么在 HTML 中使用 display:hidden 被认为是不好的做法？答案

【问题标题】：Why is it considered bad practice to use display:hidden for text in HTML?为什么在 HTML 中使用 display:hidden 被认为是不好的做法？
【发布时间】：2013-09-23 13:35:26
【问题描述】：

我最近遇到了这个教程，它使用 CSS 背景图像来显示网页的徽标，而不是使用 HTML 标记。包含徽标的 div 中有一个占位符文本，为了使该文本消失，作者使用 text-indent:-9999px 而不是 display:hidden 因为他说使用后者是不好的做法。

那么，为什么它被认为是不好的做法？

【问题讨论】：

标签： html css image hidden indentation

【解决方案1】：

因为有时屏幕阅读器和搜索引擎会忽略带有 display:none 或 visibility:hidden 的元素，但不会忽略那些出于 SEO 和/或语音目的而位于屏幕外的元素。然而，这两种方法是否是“不好的做法”并不是真正的全行业协议，更多的是一种偏好，这取决于作者对这些工具的真正了解以及他们对网站的目标。

另外请记住，建议至少有 5 年的历史，而且随着时间的推移会发生变化，所以当时的“最佳实践”现在并不自动成为最佳实践。

所以，找出你想要达到的目标，然后考虑你的选择，这在我看来是“最佳实践”。

【讨论】：

我现在明白了。感谢您的建议！ :)

【解决方案2】：

主要是因为屏幕阅读器不会阅读隐藏的内容，但很多人会阅读位于屏幕外但仍然可见的内容。

【讨论】：

【解决方案3】：

首先，没有什么叫做display: hidden;，或者是display: none;，或者是visibility: hidden;或overflow: hidden;，我不喜欢使用它，而是使用img标签，使用alt 属性来描述我的图像，是的，屏幕阅读器请阅读ALT 文本，如果您的img 标签上没有alt，它会简单地忽略它..

例如，如果我使用img 作为我的徽标，那么我将使用类似

<img src="#" alt="Company Name Logo" title="Company Name" />

【讨论】：

哦，我的错。我的意思是显示：无。感谢您的答复！ :)

【解决方案4】：

为徽标使用背景图片意味着您可以将徽标文本放置在同一元素中。

其中一个原因是无障碍阅读器（针对视障人士）在看不到徽标时会阅读徽标文本。但是，您不希望徽标上方的文本，因此您可以通过文本缩进来隐藏它。

显示中的内容：未读取任何元素。

我不是 100% 确定这一点，但我还记得读过一些搜索引擎会忽略隐藏元素中的内容。然而，它们可能会将缩进的内容编入索引，但这需要验证。

【讨论】：