pointer-events: none在ie10及更早版本完全未实现，需用透明遮罩替代；遮罩须设position: absolute/fixed、z-index高于目标、background: transparent，并确保关闭按钮为其真实子元素且无障碍属性完备。
pointer-events: none 在 IE10 及更早版本中完全不可用 —— 不是“兼容性差”，而是该属性压根没被实现。IE 仅在 SVG 元素上支持 pointer-events（从 IE9 开始），对普通 HTML 元素（如 div、span）始终忽略该声明。
为什么不能靠加 vendor prefix 或 JS 检测修复
这不是语法或渲染 bug，而是规范层面的缺失：IE10 的 CSS 引擎根本不解析 pointer-events 这个 CSS 属性名。加 -ms-pointer-events 无效，@supports (pointer-events: none) 返回 false，JS 读取 getComputedStyle(el).pointerEvents 得到空字符串或默认值 auto。
- 所有试图“打补丁”的方式（如动态改 class、UA 判断后切换逻辑）都会引入额外条件分支和维护成本
- JS 模拟穿透（例如
elementFromPoint+ 临时隐藏）在 iframe、缩放、滚动中极易坐标失准，且触发重排 - 伪元素（
::before/::after）无法承载可交互子节点，所以不能用它包裹关闭按钮等控件
透明遮罩层怎么写才真正有效
用一层无背景、无事件绑定的 div 覆盖目标区域，靠定位与层级达成“视觉存在但事件静默”的效果：
- 遮罩必须设
position: absolute或fixed，且z-index高于被遮盖内容 - 背景只能用
background: transparent；禁用rgba(0,0,0,0)（IE8 不识别 rgba） - 不要给遮罩设
pointer-events: none（IE 忽略，还可能干扰其他浏览器行为） - 若遮罩需随滚动同步位置，监听
scroll手动更新top/left，或改用position: fixed+transform: translateZ(0)（IE10+ 硬件加速）
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 9999;
background: transparent;
/* 不要写 pointer-events: none */
}
如何让遮罩内的按钮仍可点击
关键不是“恢复事件”，而是确保按钮是遮罩的真实 DOM 子元素，并显式设置可交互状态：
- 结构必须是
<div class="overlay"><button class="close-btn"></button></div>，而非伪元素或兄弟节点 -
.close-btn不需要pointer-events: auto（默认就是），但需确保它没被父级继承的none覆盖（IE 下这步其实无效，但现代浏览器需要） - 为保障可访问性，遮罩层应加
aria-hidden="true"，而按钮保留aria-label和tabindex - 避免用
opacity: 0替代transparent—— opacity 为 0 时元素仍占位、仍可聚焦、仍可能拦截事件（尤其 iOS Safari）
最易被忽略的一点：遮罩层本身不响应任何事件，靠的是“不注册 handler + 视觉覆盖 + 正确层级”，而不是靠 CSS 属性“禁用”它 —— 这个思维转换，比写多少兼容代码都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
