HTML5 添加了 ​​hidden​​​ 属性，该属性与 CSS ​​display: none​​​ 具有相同的效果。如果使用 ​​hidden​​ 属性，则无论其值如何，都不会显示元素：

<div hidden>
  <!-- 这将从屏幕上消失 -->
</div>

两者都会对屏幕阅读器隐藏内容。

区别

• ​​display: none​​​ 和​​hidden​​​ 属性的工作方式相同。但是​​hidden​​ 属性提供了更好的语义。
• ​​display: none​​​ 在旧浏览器中有效，但 IE 10 及更低版本原生不支持​​hidden​​。

为了解决这个问题，我们可以简单地设置：

[hidden] {
  display: none;
}

它包含在现代 CSS 规范化库中，比如 ​​Normalize.css​​。