Gmail自动将地址转为蓝色链接，pointer-events属性失效求助

我明白你遇到的麻烦——Gmail的自动链接识别总是把你<span>里的地址转成蓝色的谷歌地图链接，而且你尝试的CSS里pointer-events: none和cursor: default完全不起作用。这其实是因为Gmail的机制在搞鬼：它会把识别到的地址文本自动包裹在它自己生成的<a>标签里，你写的CSS只作用在内部的<span>上，外层的<a>依然拥有点击事件，所以那些样式自然无效。

下面给你几个靠谱的解决方案，按推荐优先级排序：

1. 破坏Gmail的自动识别（最可靠） #

Gmail的链接识别是基于连续的语义文本，只要我们在地址里插入一些不可见的、不影响显示的内容，就能让它无法识别为完整地址：

• 插入零宽空格（​）：

<span id='linkRemove'> ad&#8203;dress </span>

零宽空格在页面上完全看不到，但会打断Gmail的识别逻辑，不会生成链接。

• 插入HTML注释：

<span id='linkRemove'> ad<!-- -->dress </span>

同样，注释不会显示在页面上，但能分割文本，让Gmail无法识别为有效地址。

2. 针对Gmail生成的<a>标签覆盖样式（备选） #

如果不想修改文本内容，可以尝试用内联样式+!important强制覆盖，但效果可能因Gmail的过滤规则而异。因为Gmail会把你的结构变成<a><span>...</span></a>，所以你可以给<span>加上能穿透到外层的样式：

<span id='linkRemove' style="color: inherit; text-decoration: none; pointer-events: none !important; cursor: default !important;"> address </span>

不过要注意，这种方法的稳定性不如第一种，因为Gmail可能会过滤掉pointer-events这类样式。

为什么你的原CSS无效？ #

再明确一下：当Gmail识别到地址后，它会把你的代码重写成类似这样的结构：

<a href="https://maps.google.com/..." style="...">
  <span id='linkRemove' class='linkRemove'> address </span>
</a>

你的pointer-events: none是加在<span>上，但点击事件是由外层的<a>触发的，所以根本不会生效。而color: inherit和text-decoration: none能生效，是因为它们会继承到外层的<a>标签上（或者覆盖了<a>的默认样式）。

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