Hubspot生成的Outlook邮件签名显示异常问题求助

问题1：发送前图标后方显示斜杠 #

原因 #

Hubspot生成的签名采用了XHTML风格的自闭合<img />标签，Outlook的HTML解析引擎（尤其是旧版本）对该写法兼容性差，会把末尾的斜杠当作文本渲染出来。

修复方案 #

将所有自闭合的<img />标签改为非自闭合写法，去掉末尾的斜杠：

<!-- 原代码 -->
<img src="linkedin-icon.png" alt="LinkedIn" />

<!-- 修改后 -->
<img src="linkedin-icon.png" alt="LinkedIn">

问题2：发送后签名文本及图标出现上下下划线 #

原因 #

Outlook会自动给所有<a>标签（包括包裹图标的链接）添加下划线和边框，且默认样式优先级高，普通类样式无法覆盖。

修复方案 #

给所有<a>标签和相关元素添加inline样式（Outlook仅支持inline样式，不识别外部/内部样式表）：

1. 给包裹文本或图标的<a>标签添加text-decoration: none; border: none;，强制取消下划线和边框
2. 给<img>标签添加border: 0;，防止图片被识别为链接时显示边框
3. 给包含文本的<p>标签添加text-decoration: none;，避免继承下划线样式

修改后的示例代码：

<div>
  <p style="text-decoration: none;">你的姓名</p>
  <p style="text-decoration: none;">你的职位</p>
  <p style="text-decoration: none;">
    <a href="tel:你的电话" style="text-decoration: none; border: none;">你的电话</a> | 
    <a href="mailto:你的邮箱" style="text-decoration: none; border: none;">你的邮箱</a>
  </p>
  <p style="text-decoration: none;">
    <a href="你的LinkedIn链接" style="text-decoration: none; border: none;">
      <img src="linkedin-icon.png" alt="LinkedIn" style="border: 0;">
    </a>
    <a href="你的Twitter链接" style="text-decoration: none; border: none;">
      <img src="twitter-icon.png" alt="Twitter" style="border: 0;">
    </a>
  </p>
</div>

额外注意事项 #

• 不要依赖CSS类样式，所有样式必须写在元素的style属性中
• 给图片添加width和height属性，避免Outlook自动缩放导致布局错乱：

  <img src="icon.png" alt="Icon" style="border: 0;" width="24" height="24">
  

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