HTML邮件签名在Outlook/Gmail中显示切片问题求助

问题根源 #

浏览器的HTML渲染规则和邮件客户端（尤其是Outlook、Gmail）差异极大，切片图片出现明显分隔，基本逃不出这几个原因：

• 图片自带默认边框、内边距或外边距未清除
• 图片作为行内元素存在默认行高间隙
• 包裹切片的表格未重置单元格间距
• 切片尺寸不匹配或路径引用问题

分步修复 #

1. 给切片图片加强制内联样式 #

所有切片图片必须添加以下内联样式，消除默认样式和行内间隙：

<img src="你的切片路径" alt="" style="border:0; padding:0; margin:0; display:block; line-height:0;">

邮件里必须用内联样式，外部CSS或<style>标签在Outlook里基本会被过滤

2. 用无间距表格包裹切片 #

邮件布局必须依赖表格，把所有切片放进同一个表格的单元格，彻底消除单元格间隙：

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
  <tr>
    <td><img src="slice1.jpg" alt="" style="border:0; display:block;"></td>
    <td><img src="slice2.jpg" alt="" style="border:0; display:block;"></td>
  </tr>
</table>

• cellpadding="0" cellspacing="0" border="0"：清除单元格默认间距
• mso-table-lspace:0pt; mso-table-rspace:0pt;：专门针对Outlook的私有样式，消除表格额外留白

3. 严格匹配切片尺寸 #

检查每个切片的宽高是否和设计稿完全一致，哪怕1px偏差都会出缝。给每个单元格和图片都指定固定宽度：

<td width="150" style="width:150px;">
  <img src="slice1.jpg" alt="" style="border:0; display:block; width:150px; height:auto;">
</td>

4. Outlook专属修复 #

Outlook会自动给图片加边框，除了border:0，再加mso-border-alt:none;彻底禁用：

<img src="slice.jpg" alt="" style="border:0; mso-border-alt:none; display:block;">

5. Gmail适配 #

Gmail会过滤部分样式，确保所有样式都是内联的，同时用绝对路径引用图片（不要用相对路径），防止图片加载失败导致布局错乱。

验证技巧 #

1. 把修改后的HTML保存为本地文件，直接用Outlook打开测试（不要直接粘贴，先通过导入签名的方式添加）
2. 粘贴到Gmail时，先在记事本里复制HTML代码，再粘贴到签名编辑器的源码模式（如果支持）

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