pointer-events: none在ie9及以下完全未实现，须用透明遮罩替代；其通过position+z-index实现视觉覆盖与事件穿透，配合aria-hidden="true"保障可访问性，比js模拟更稳定无闪烁。
pointer-events: none 在 IE9 及以下完全无效，不是兼容性差，是压根没实现 —— 所以用透明遮罩替代，是目前最稳定、无闪烁、不依赖 UA 判断的方案。
为什么透明遮罩比 JS 模拟更可靠
JS 模拟（如临时隐藏元素再 elementFromPoint）容易引发重排、闪烁，且在 iframe 或缩放页面中坐标计算失准；而透明遮罩只是一层静态 DOM，不修改原结构，也不触发重绘。关键点在于：遮罩本身不拦截事件，而是通过 z-index 和视觉覆盖达成“禁用+穿透”双重效果。
- 遮罩必须设为
position: absolute或fixed，并确保z-index高于被遮盖内容 - 遮罩不能设
pointer-events: none（IE9- 会忽略），但也不需要 —— 它本就不响应事件，靠的是“不绑定任何 handler”来保持静默 - 遮罩背景必须为
transparent，不能用rgba(0,0,0,0)（IE8 不支持 rgba） - 若遮罩需适配滚动区域，应监听
scroll并手动同步其top/left，或改用position: fixed+transform: translateZ(0)触发硬件加速（IE10+）
遮罩如何避免挡住键盘焦点和屏幕阅读器
透明遮罩如果覆盖了可聚焦元素（如 button、input），会导致 Tab 键无法进入、aria-hidden 失效。这不是视觉问题，而是语义阻断。
- 遮罩上必须加
aria-hidden="true"，否则 NVDA/JAWS 仍会尝试读取它（尽管空） - 遮罩不能设
tabindex="-1"，否则会抢走焦点流；也不应设focusable="false"（IE 不识别） - 若被遮盖的是表单控件，建议同时对原元素设
disabled或tabindex="-1"+aria-disabled="true"，确保键盘与辅助技术行为一致 - 遮罩尺寸必须严格匹配目标区域，用
getBoundingClientRect()动态计算比写死 CSS 更安全（尤其响应式场景）
IE8–IE9 下遮罩的定位陷阱
IE8–IE9 对 position: absolute 的 containing block 计算有偏差，尤其当父容器含 zoom: 1 或 hasLayout 触发时，遮罩容易偏移。
- 不要依赖
top: 0; left: 0直接撑满父容器 —— 改用top: 0; right: 0; bottom: 0; left: 0，IE8 对四值写法兼容更好 - 避免在遮罩上使用
transform（IE9- 不支持），也不要依赖calc()（IE9 不支持） - 若父容器是
display: table-cell，IE8 会把遮罩定位到表格框外，此时必须改用 JS 获取offsetTop/offsetLeft手动设置 - 遮罩的
width/height建议用100%而非auto，IE8 对auto在绝对定位下解析异常
真正难处理的不是“怎么让遮罩显示”，而是“怎么让它不破坏焦点流、不干扰屏幕阅读器、不随滚动错位”。这些细节在现代浏览器里常被忽略，但在 IE8–IE9 环境下，漏掉任意一项都会导致 WCAG 2.0 AA 不达标或键盘用户完全无法操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
