IE9及更早版本完全不支持hidden属性，既不识别该属性，也不支持[hidden]选择器，连CSS降级都无效；必须用.js-hidden类配合display: none!important模拟，且JS需检测特性后分支处理。

hidden属性在IE9及更早版本中完全不生效

IE9 不识别 hidden 属性，既不会触发渲染树移除，也不支持 [hidden] CSS 选择器——连降级样式都写不了。这不是“兼容性差”，而是彻底缺席。如果你的项目仍需支持 IE9（比如政企内网系统），hidden 不能作为主控逻辑，只能当现代浏览器的语法糖。

用CSS兜底必须加 !important 且放在全局层

现代浏览器默认对 hidden 应用 display: none，但该规则优先级极低，容易被外部样式覆盖。尤其在表格、Flex 容器或 Shadow DOM 中，tr[hidden] 可能被 tr { display: table-row; } 覆盖而失效。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 必须在基础 CSS 中显式声明：

  [hidden] { display: none !important; }

• 这条规则要放在所有其他样式之前，或用 @layer base 确保层级最高
• 别依赖框架自带的 reset 或 normalize.css，它们通常不含此规则

JS动态控制时，IE10+可用 elem.hidden = false，IE9必须手动切class

IE10+ 支持 hidden 属性的 DOM API，elem.hidden = true/false 是安全写法；IE9 则必须退化为 class 控制，且不能只靠 CSS 规则，因为 IE9 不支持 [hidden] 选择器。

• IE9 兼容写法示例：

  if ('hidden' in document.createElement('div')) {
    elem.hidden = false;
  } else {
    elem.classList.remove('js-hidden');
  }

• 对应 CSS 必须写：

  .js-hidden { display: none !important; }

• 不要用 setAttribute('hidden', '') + polyfill 混搭——IE9 下 hasAttribute('hidden') 始终返回 false，逻辑会断掉

服务端渲染（SSR）首屏闪现问题比客户端更严重

SSR 输出的 HTML 若含 <div hidden>，但未在 CSS 中提前注入 <code>[hidden] { display: none !important; }，Chrome/Firefox 在 hydration 完成前会短暂渲染该元素——尤其当 JS 加载延迟或执行慢时，用户肉眼可见“闪一下”。这在移动端 3G 网络下尤为明显。

立即学习“前端免费学习笔记（深入）”；

• Next.js / Nuxt 等框架需确保该 CSS 规则打入 <head> 的 critical CSS 中
• 若用 Tailwind，不能只靠 hidden 工具类（它生成的是 display: none，非属性选择器），必须额外配置 [hidden] { display: none !important; }
• Hydration 后若用 elem.hidden = false 显示元素，务必先清空内联 style.display，否则旧值残留导致不可见

真正难处理的不是“怎么写”，而是“什么时候不该用”。比如折叠面板需要过渡动画、表单字段要隐藏但参与提交、或组件在 SSR 和 CSR 间状态不一致——这些场景下，hidden 表面简单，实则埋着语义断裂和兼容性雪球。