旧版ie（ie9及以下）完全不支持pointer-events: none，必须用透明遮罩替代：通过position+z-index实现视觉覆盖与事件穿透，配合aria-hidden="true"保障可访问性，比js模拟更稳定无闪烁。
旧版IE（IE9及以下）根本不支持pointer-events: none
这个属性在 IE9 及更早版本中完全未实现，不是“兼容性差”，而是压根没解析、不生效。所有基于 pointer-events: none 的点击穿透逻辑，在这些浏览器里都会失效——遮罩层依然会拦截点击，哪怕你写了也没用。
常见错误是加了 pointer-events: none 后测试发现点不透，然后反复检查 DOM 结构或 z-index，却忽略了浏览器根本不认这行 CSS。
- IE8/IE9 会直接忽略该声明，计算样式时返回默认值
auto - 无法通过
@supports检测，因为 IE 不支持该语法 - JS 读取
getComputedStyle(el).pointerEvents在 IE9- 返回空字符串或undefined，不可靠
用透明遮罩替代 pointer-events: none 是唯一稳定方案
核心思路：不用禁用事件，而是让遮罩层“不参与事件流”——它本身不绑定任何事件监听器，也不响应任何交互，只靠定位和层级视觉覆盖，同时保持底层元素可点击。
关键实操要点：
- 遮罩必须设为
position: absolute或position: fixed，且z-index高于目标内容 - 背景色只能用
background: transparent；避免rgba(0,0,0,0)（IE8 不支持 rgba） - 不要给遮罩加任何
onclick、onmousedown等内联事件，也不要绑定 JS 监听器 - 若需适配滚动区域，监听
scroll手动同步遮罩的top/left，或改用position: fixed+transform: translateZ(0)触发硬件加速（IE10+）
必须配套 aria-hidden 和语义化处理
透明遮罩虽不拦截点击，但对屏幕阅读器仍是可见的 DOM 节点。如果不做处理，会导致无障碍体验断裂——读屏软件会朗读一个“空遮罩”，用户困惑。
正确做法：
- 给遮罩元素加
aria-hidden="true" - 如果遮罩用于模态框（如弹窗），确保同时控制
aria-modal="true"和inert属性（现代浏览器支持，IE 中可用 JS 模拟） - 遮罩内不要放任何可聚焦元素（如
input、button），否则键盘 Tab 会卡住
移动端和动画场景下更要警惕混合写法
即使在支持 pointer-events: none 的现代浏览器中，也常有人为了“兼容旧 IE”而保留透明遮罩结构，再叠加 pointer-events: none —— 这反而引发新问题。
典型陷阱：
- 透明遮罩 +
pointer-events: none在 iOS Safari 中可能触发双层事件捕获，导致点击延迟或误触发 - 用
opacity: 0隐藏遮罩时，没同步移除pointer-events: none，动画中间帧仍处于禁用状态 - 在 React/Vue 中用 class 切换显隐，但 IE9- 下 class 名匹配失败（比如用了
.modal.open却忘了 IE 不支持后代选择器动态更新）
真正容易被忽略的是：旧版 IE 的问题从来不在“怎么让 pointer-events 生效”，而在于你是否彻底放弃了这条路径——一旦开始写兼容 fallback，就必须把整套交互逻辑（包括 JS 显隐控制、焦点管理、键盘导航）都按无 pointer-events 的方式重写，而不是打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
