IE9及以下不支持hidden属性，必须用display: none替代，并配合aria-hidden和CSS类控制；IE10部分支持但有渲染异常。
IE10以下不支持
属性怎么办
直接说结论：
属性在 IE9 及更早版本完全无效，IE10 开始部分支持但存在渲染异常（比如仍占布局空间或焦点可进入）。不能靠它做兼容性隐藏逻辑，必须降级为 CSS 控制。
是最稳妥的替代，但要注意这些行为差异
能彻底移除元素、不占空间、不可聚焦、不触发任何事件——这点和标准
最接近。但它不是“语义等价”，而是“功能等价”：
是 HTML 属性，影响可访问性（AT 会跳过），而
同样被屏幕阅读器忽略（主流 AT 都遵循此规则）
用 JS 切换时，
会触发重排（reflow），而
不会——但 IE9/10 下这基本无感知
慎用
：它保留占位、仍可获得焦点、键盘可 Tab 进入，不符合
语义
JS 动态控制时，别直接操作
手写
看似简单，但容易覆盖内联样式或干扰 CSS 动画。推荐封装一个轻量函数：
注意三点：
立即学习
“
前端免费学习笔记（深入）
”；
显式加
弥补语义缺失（尤其对 IE9 的 NVDA/JAWS 更友好）
是清空内联 display，让 CSS 规则重新生效，比设回
安全
如果元素原本是
或
，硬设
会破坏布局
用 class 切换比内联样式更可控
真正上线项目建议用 class 控制，避免样式污染和优先级冲突：
然后 JS 里只操作类名：
—— 隐藏
—— 显示
搭配
是为了压制可能存在的高优先级内联
（比如某些 UI 库的强制设置）
唯一要注意的是：IE9 不支持
，得用
字符串拼接或引入极简 polyfill——但如果你还在维护 IE9，大概率 already have that.
hiddenhiddendisplay: nonedisplay: nonehiddenhiddendisplay: nonedisplay: nonehiddenvisibility: hiddenhiddenstyle.displayelement.style.display = 'none'function setHidden(el, bool) {
if (bool) {
el.setAttribute('aria-hidden', 'true');
el.style.display = 'none';
} else {
el.removeAttribute('aria-hidden');
el.style.display = '';
}
}aria-hiddenel.style.display = '''block'inlineflex'block'.is-hidden { display: none !important; }el.classList.add('is-hidden')el.classList.remove('is-hidden')!importantdisplayclassListclassName