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