IE9及更早版本完全不支持pointer-events属性，所有相关CSS和JS操作均无效；应改用透明遮罩并严格遵循定位、背景、事件、无障碍等实操要点。
pointer-events: none 在 IE9 及更早版本中完全不生效，不是“兼容性差”，而是浏览器压根不解析这行 CSS —— 所有依赖它的点击穿透逻辑都会失效。
为什么 getComputedStyle(el).pointerEvents 返回空字符串或 undefined
IE9- 不支持 pointer-events 属性，也不支持 @supports 语法，因此：
• getComputedStyle(el).pointerEvents 返回空字符串或 undefined
• @supports (pointer-events: none) 会被整个忽略（语法错误级不识别）
• 开发者工具里查不到该属性，检查 computed style 也看不到它
• 试图用 JS 动态写 el.style.pointerEvents = 'none' 同样无效
用透明遮罩替代 pointer-events: none 的实操要点
这不是“降级方案”，而是唯一稳定路径。核心是让遮罩层视觉存在、语义静默、事件透明：
• 遮罩必须设 position: absolute 或 position: fixed，且 z-index 明确高于目标内容
• 背景只能用 background: transparent；禁用 rgba(0,0,0,0)（IE8 不支持 rgba）
• 遮罩元素上不能有任何内联事件（如 onclick）、也不能绑定 JS 监听器
• 若遮罩需随滚动同步位置，监听 scroll 手动更新 top/left，或改用 position: fixed + transform: translateZ(0)（IE10+ 硬件加速）
无障碍处理常被跳过但极其关键
透明遮罩在 DOM 中依然存在，对屏幕阅读器不是“不可见”，而是“可见但空”：
• 必须加 aria-hidden="true"，否则 NVDA/JAWS 会读出一个无意义的空节点
• 若用于模态框，同步控制 aria-modal="true" 和原生 inert（现代浏览器），IE 中可用 JS 模拟：移除 tabindex、遍历子元素设 tabindex="-1" 并加 aria-disabled="true"
• 遮罩内部严禁放置任何可聚焦元素（如 button、input），否则键盘 Tab 会卡死
立即学习“前端免费学习笔记（深入）”；
最易忽略的一点：很多人在现代浏览器中保留透明遮罩结构，再额外叠加 pointer-events: none，以为“双重保险”。结果是遮罩在 IE 中正常，在 Chrome 中却因 pointer-events: none 导致 hover 失效、焦点丢失——这不是兼容问题，是结构冗余引发的跨浏览器行为冲突。
