如何避免从Outlook发送到Gmail的HTML链接显示下划线？

这个问题属于邮件客户端样式兼容性的典型坑——Outlook和Gmail对链接样式的解析逻辑差异很大，再加上复制粘贴过程中样式的丢失或篡改，才导致你设置的text-decoration: none失效。下面给你几个针对性的解决方案：

1. 双层嵌套元素强制覆盖样式 #

Gmail经常会忽略<a>标签的text-decoration设置，但对内部<span>的样式识别度更高。你可以把链接文本用<span>包裹，同时给<a>和<span>都加上样式：

<a href="tel:1000000000" style="text-decoration: none; color: #4e4b4c;">
  <span style="text-decoration: none; color: #4e4b4c;">1000000000</span>
</a>

这种双层样式设置能极大提高Gmail识别无下划线样式的概率。

2. 用!important强制覆盖默认样式 #

Gmail会给tel:、mailto:这类链接自动添加下划线和默认颜色，你可以用!important强制覆盖它的默认规则：

<a href="tel:1000000000" style="text-decoration: none !important; color: #4e4b4c !important;">1000000000</a>

虽然!important在常规前端开发里不推荐，但在邮件客户端这种样式优先级混乱的场景下，是很有效的应急手段。

3. 避免复制渲染后的内容，直接插入HTML源码 #

你之前复制Outlook渲染后内容的操作，会让Outlook把原始HTML转换成它自己的富文本格式，很多精细的样式会被丢失或篡改。正确的做法是直接在Outlook中插入原始HTML：

• 打开Outlook新建邮件，点击「插入」→「文本」→「编辑HTML源码」（不同版本的Outlook入口略有差异，有的直接叫「HTML」按钮）
• 把你写好的HTML代码直接粘贴进去，再关闭源码编辑模式
• 这样发送的邮件能保留原始样式，Gmail接收时也不会乱加下划线

为什么之前的方法没用？ #

当你从Outlook复制渲染后的内容时，Outlook的富文本引擎会重新处理样式，导致<a>标签的text-decoration: none被悄悄移除或失效；而Gmail收到内容后，会自动识别tel:链接并应用它的默认样式（下划线+蓝色），这就导致你看到的下划线又回来了。

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