如何让HTML邮件签名兼容Gmail、Apple Mail、Outlook等主流邮件客户端？

核心布局选择：必须用<table> #

别纠结div还是生成器——要兼容Outlook（尤其是Windows旧版本），tables是唯一可靠的布局方案。div和生成器可能在Gmail、Apple Mail这类现代客户端正常，但Outlook对CSS盒模型支持极差，会直接打乱div布局。生成器大多也是基于tables封装的，不如自己写可控性强。

样式编写规则 #

• 全部用内联样式：不要写<style>标签或外部CSS，Gmail会剥离头部样式，Outlook对内部样式支持有限。所有样式直接写在标签的style属性里。
• 避免浮动/定位：用<td>的对齐属性（align、valign）实现布局，比如左对齐头像、右对齐文字，完全依赖table单元格的排版。
• 用系统安全字体：比如font-family: "Arial", "Helvetica", sans-serif;，自定义字体在邮件客户端里大概率会失效，直接用系统自带的字体保证一致性。
• 消除Outlook单元格间距：给外层table加内联样式style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"，避免单元格之间出现莫名空隙。

图片处理要点 #

• 固定宽高属性：给<img>同时设置width、height属性和对应的内联样式，比如<img src="xxx" width="80" height="80" style="width: 80px; height: 80px;" alt="头像">，Outlook会忽略CSS尺寸，必须靠属性控制。
• 用绝对路径：图片地址必须是完整的HTTP/HTTPS链接，不要用相对路径，否则客户端找不到资源。
• 添加alt文本：图片加载失败时，alt文本能显示关键信息，提升可用性。

细节兼容技巧 #

• 只用HTML4标签：别用HTML5的<section>、<article>，老老实实只用table、tr、td、span、img、br这些标签。
• 换行用<br>：不要依赖<p>的margin，不同客户端对p的边距解析差异大，直接用<br>控制换行。
• 链接样式自定义：给<a>标签内联设置颜色和文本装饰，比如<a href="xxx" style="color: #0078D4; text-decoration: none;">我的官网</a>，避免客户端默认的蓝色下划线样式。

测试建议 #

写完后直接用目标客户端发送测试邮件——在线预览工具的模拟经常不准，必须实际在Outlook（Windows版）、Gmail（网页+APP）、Apple Mail（Mac+iOS）里查看效果，逐个调整细节。

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