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; } 覆盖而失效。
- 必须在基础 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 规则打入
的 critical CSS 中 - 若用 Tailwind，不能只靠
hidden工具类（它生成的是display: none，非属性选择器），必须额外配置[hidden] { display: none !important; } - Hydration 后若用
elem.hidden = false显示元素，务必先清空内联style.display，否则旧值残留导致不可见
hidden 表面简单，实则埋着语义断裂和兼容性雪球。
