IE11中设置pointer-events为None时，链接内的SVG无法点击

嘿，这个问题我之前处理IE11兼容时也碰到过！根源在于IE11对SVG的pointer-events属性支持有bug——当你给SVG标签设置pointer-events: none时，它会错误地把这个“不可响应鼠标事件”的特性传递给父级的<a>标签，导致整个链接都没法触发点击。

下面给你几个实用的修复方案，你可以根据自己的场景选择：

方案1：给外层容器/链接强制设置pointer-events: auto #

既然IE11会错误继承不可点击的特性，那我们直接给包裹SVG的.b容器或者<a>标签显式设置pointer-events: auto，强制让它们恢复可点击状态：

/* 给容器和链接都加上，确保覆盖到 */
.b, .b > a {
  pointer-events: auto;
}

这样SVG依然保持pointer-events: none（不会干扰其他交互逻辑），而外层的链接容器能正常响应点击事件。

方案2：把pointer-events: none移到SVG内部元素上 #

如果你的SVG里有具体的图形元素（比如你例子里的<rect>），可以把pointer-events: none直接应用到这些内部图形上，而不是整个SVG标签：

/* 移除svg标签的pointer-events样式，给内部rect设置 */
svg rect {
  pointer-events: none;
}

这样整个SVG容器不会阻止父级链接的点击，同时内部的图形也不会响应鼠标交互，完美达到你的需求。

方案3：用CSS伪元素替代简单SVG（可选） #

如果你的SVG只是用来展示简单的图形（比如例子里的蓝色带边框矩形），完全可以用CSS样式来替代SVG，彻底避开IE11的SVG兼容性问题：

修改CSS：

.b a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0000ff;
  border: 3px solid #000;
  box-sizing: border-box; /* 确保边框不会撑大容器 */
}

然后把HTML里的SVG部分删掉，这样链接的点击逻辑在IE11里就能正常工作了，代码也更简洁。

内容的提问来源于stack exchange，提问作者Arya