IE9及以下不支持hidden属性，需用display: none模拟其语义（移除渲染、不占空间、不可交互、不被AT读取），推荐统一使用.is-hidden类控制，并在JS中通过getComputedStyle或状态标记判断隐藏状态。
IE9及以下不支持hidden属性怎么办？
IE9及更早版本完全忽略hidden属性，设置hidden="hidden"或hidden对渲染无任何影响。必须用CSS或JS模拟等效行为，核心是让元素不可见且不占布局空间——这和hidden的语义一致，不是单纯视觉隐藏。
用display: none是最直接的替代方案
这是最接近hidden语义的CSS方式：元素从渲染树中移除，不占空间、不可交互、不被屏幕阅读器读取（与hidden默认行为一致）。注意不要用visibility: hidden或opacity: 0，它们仍占据布局空间且可能被AT读取。
实操建议：
- 统一用类名控制，比如
.is-hidden { display: none; }，避免内联样式难以维护 - 若需动态切换，用
element.classList.add("is-hidden")和element.classList.remove("is-hidden")，比操作style.display更可靠 - IE8不支持
classList，需降级为className字符串操作或引入兼容补丁
JS里如何检测并响应hidden属性变化？
IE9以下无法监听hidden属性变更（因为压根不解析它），所以不能依赖MutationObserver或onpropertychange。必须主动同步状态：当业务逻辑决定“隐藏”某元素时，同时设置hidden属性和display: none；读取是否隐藏时，不能只查elem.hidden（IE下永远false），而应检查getComputedStyle(elem).display === "none"或自维护一个状态标记。
常见错误现象：
- 在IE中调用
elem.hasAttribute("hidden")返回true，但elem.hidden仍为false——这是IE对布尔属性的特殊处理，不可信 - 用
elem.setAttribute("hidden", "")后立即读elem.hidden，IE8/9返回false，但DOM上已有该属性 - 依赖
hidden做条件渲染（如v-if类逻辑），未降级会导致IE中元素始终显示
要不要 polyfill hidden 属性？
可以，但要谨慎。简单polyfill（如监听hidden属性并自动加display: none）在IE中需用onpropertychange（仅IE），且仅对document内元素生效；现代框架（React/Vue）通常已内置兼容逻辑，手动polyfill反而可能冲突。
更稳妥的做法：
- 构建时用PostCSS插件（如
postcss-hidden）将[hidden]选择器自动转为[hidden], .is-hidden - 在JS入口处运行一次初始化脚本，遍历所有
[hidden]元素并添加.is-hidden类 - 如果项目已用jQuery，可用
$("[hidden]").hide()，但注意.hide()会记录原始display值，后续.show()才可恢复，而原生hidden移除后是直接回退到CSS或默认display值
真正容易被忽略的是：IE中display: none的元素，其子元素即使显式设display: block也无效——这点和hidden行为完全一致，但开发者常误以为“子元素能绕过父级隐藏”。
