Question

我遇到了问题，希望这里的人能启发我：

<div class="myclass" hidden></>

在本地运行时，不显示该div。没错吧？但是，如果我将hidden属性添加到class标签，即：

<div class="myclass hidden"></>

显示div。这应该发生。

但是当我将“正确的”代码部署到我们的测试环境时，div仍会显示，但是如果我将“ hidden”属性添加到class标记中则不会显示。我已经在Chrome中手动编辑了html，并且可以复制该行为。我不明白为什么会这样。有人可以帮我吗？谢谢

Answer 1

在这种情况下，<div class="myclass" hidden>您使用的是全局HTML属性，这将使浏览器无法呈现该元素。

在另一种情况下，<div class="myclass hidden">是在元素中添加一个名为hidden的类，该类可以与您想添加到其上的任何自定义样式相关联，但不会生成任何“默认”样式。

Answer 2

隐藏的不是类名，而是属性。除非您在.css代码中有一个称为“隐藏”的类，否则<div class="myclass hidden"></>将永远无法工作。可以将hidden视为可以执行某些操作的动作。另一个示例是disabled，这是一个禁用元素的操作。隐藏隐藏元素。这就是<div class="myclass" hidden></>起作用的原因，并且是使用hidden的正确方法。希望这是一个很好的解释。

Answer 3

hidden tag attribute与所有浏览器版本都不兼容，如您所见here：

736558.1997453704
736558.1997569444
736558.1997685186
736558.1997800926
736558.1997916667
736558.1998032407
736558.1998148148
736558.1998263889
736558.199837963
736558.199849537

要正确隐藏标签，请使用以下方法：

 Browser Support (from which version is available):
 Chrome: 6.0
 Firefox: 4.0
 Safari: 5.1
 Opera: 11.1
 Internet Explorer / Edge: 11.0

<div class="myclass hidden">...</div> <style> .hidden { visibility:hidden; display:none; } </style>完全隐藏了标签（您仍然可以通过DOM与之交互）。

使用display:none标签不可见，但占据了页面上的空间。

正确使用html标签中的“隐藏”属性

3 个答案: