可以使用 display:none 隐藏任何内容吗？

Question

使用 display:none 可以暂时或永久隐藏任何内容吗？在动态站点中，页面的许多组件来自不同的插件等，很多时候，如果客户端不需要页面上的任何内容，那么我使用 dispaly:none 来隐藏页面中的内容。我不会从实际源中删除东西，因为客户可以回来要求再次启用该东西。

那么，如果我永远使用 Display:none 保持任何元素隐藏，那么让东西从 display:none 中隐藏的优点和缺点是什么？

在搜索引擎优化、屏幕阅读器、辅助功能等方面有什么缺点吗？

Answer 1

这里可能还值得一提的是，一些搜索引擎（例如谷歌）确实会评估隐藏内容。

使用 display:none; 隐藏大量文本是许多搜索引擎认为是关键字垃圾邮件的事情之一。

:)

Answer 2

当您执行客户端 Ajax 时，使用“display:none”隐藏/显示内容是有意义的。这样您就可以切换视图/选项卡，而无需进行服务器往返。

当存在安全隐患时，需要从页面标记中实际删除某些内容。如果用户无权查看某些敏感信息，那么当他们单击“显示源”时，这些信息就不应该出现。

Answer 3

display: none 适合在人们关闭 CSS 或使用不支持 CSS 的浏览器时隐藏您希望可见的内容。

Answer 4

就可访问性而言，很有可能用“display: none;”隐藏了一些东西。屏幕阅读器不会读取。如果您打算这样做，这可能是可以接受的。

仅隐藏屏幕阅读器/css-offers 内容的可能替代方法是使用此类：

.offscreen {
    position: absolute;
    left: -9000px;
    width: 0;
    overflow: hidden;
}

以及以下 HTML：

<h3 class="offscreen">Site Navigation</h3>

有关隐藏技术的完整信息：
http://www.access-matters.com /2005/04/23/屏幕阅读器测试结果/

Answer 5

如果客户希望将其删除，请创建该页面的备份，并发布实际已删除该页面的页面。不要用 CSS 代替实际删除项目。如果他们决定将来需要它，那么就进去将您的备份交换为实时副本。如果您正在处理动态输出（在 PHP 或类似技术的情况下），您可以使用注释来停止该特定输出，这样它们就不会包含在响应中。

Answer 6

优点：非常容易做到

缺点：

• 您仍在服务器端加载组件，客户端将下载它们。浏览器根本不会“显示”它们。
• 任何使用“查看源代码”的人都可以看到“隐藏”的值。所以永远不要用它来隐藏敏感信息。

您可以简单地在服务器端“注释”这些部分，以节省服务器上的大量处理、带宽等。