可以使用 display:none 隐藏任何东西吗？答案

【问题标题】：Is it ok to hide any things using display:none?可以使用 display:none 隐藏任何东西吗？
【发布时间】：2010-02-18 15:28:54
【问题描述】：

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

那么，如果我永远使用Display:none 将任何元素隐藏起来，那么保持东西不显示的优点和缺点是什么？

在 SEO、屏幕阅读器、辅助功能等方面有什么缺点吗？

【问题讨论】：

我可以添加一条注释：使用display:none 隐藏元素隐藏该项目并将其从布局中删除，这可能会改变布局。使用visilbility:hidden 隐藏元素将隐藏布局中的项目，就好像该项目仍然存在但不可见。

标签： css xhtml seo screen-readers

【解决方案1】：

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

【讨论】：

这样做也不会浪费带宽。
create a backup 不不，更好的是使用源代码控制！！
但一段时间后，该页面会发生许多更改，然后我无法使用备份页面
如果源代码管理不可用，只需注释即可。
@Jitendra：确定您所做的个别更改是否值得备份，然后在必要时保留它们的版本。不要仅仅因为工作量少就走“简单”的路线。让您的客户开心，而不是麻木:)

【解决方案2】：

优点：很容易做到

缺点：

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

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

【讨论】：

【解决方案3】：

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

使用display:none; 隐藏大量文本是许多搜索引擎将其视为关键字垃圾邮件的原因之一。

:)

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

display: none 可以很好地在人们关闭 css 或使用不支持 css 的浏览器时隐藏您想要显示的内容。

【讨论】：

【解决方案6】：

就可访问性而言，很有可能用“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/screen-reader-test-results/

【讨论】：