HTML邮件兼容性比网页更难，因邮件客户端渲染引擎各异：Outlook用Word引擎、Gmail剥离样式并内联重写、Apple Mail禁用JS且限制CSS，导致同一代码在不同客户端显示差异极大。
HTML邮件必须考虑兼容性问题，而且比网页开发更棘手——不是“要不要兼容”，而是“不兼容就发不出去或收件人根本看不懂”。
为什么HTML邮件的兼容性比网页还难？
网页用的是现代浏览器引擎（Blink/WebKit/Gecko），而邮件客户端五花八门：Outlook用MS Word渲染引擎，Apple Mail用WebKit但禁用JS和部分CSS，Gmail会剥离
关键差异点：
-
display: flex在 Outlook（2016+）和旧版 Android 邮件中完全无效 -
@media查询在 Gmail App（iOS/Android）中被忽略，但网页版Gmail支持 -
background-image在 Outlook Desktop 和部分企业邮箱中被清空或显示为灰色块 -
float、position: absolute、z-index在多数邮件客户端中不可靠或直接失效
哪些HTML/CSS能安全使用？
坚持“表格布局 + 行内样式”仍是目前最稳妥的方案。不是因为优雅，是因为实测有效。
立即学习“前端免费学习笔记（深入）”；
可放心使用的组合：
- 用
<table>做整体结构，嵌套<tr><td>控制对齐和间距 - 所有样式必须写成行内
style="..."，不要依赖<style>或外部CSS - 字体用
font-family: "Helvetica Neue", Arial, sans-serif;这类安全栈，避免仅写"PingFang SC" - 颜色用十六进制（如
#333333），别用rgb()或命名色（darkgray在 Outlook 中可能变成黑色） - 图片必须带
alt属性，并设width和height（防止Gmail拉伸）
Gmail和Outlook的典型兼容陷阱
这两个是绕不开的“兼容性双雄”，出问题频率最高：
- Gmail 会移除整个
<head>和所有<style>标签，然后把剩余CSS规则“暴力内联”到元素上——导致选择器冲突、伪类丢失、媒体查询失效 - Outlook Desktop（Windows）用 Word HTML 渲染器，不支持
max-width，margin大概率被忽略，padding在<td>上才稳定 - Outlook.com（网页版）支持部分现代CSS，但和 Outlook Desktop 表现不一致，必须分开测试
- 如果用了
border-radius，在 Outlook 和部分Android客户端中会直接降级为直角，且无报错提示
怎么验证HTML邮件是否真能用？
不能只在Chrome里打开HTML文件看效果。真实验证必须走实际发送链路：
- 用
Mailchimp、Sendinblue或HubSpot的预览功能，它们内置了主流客户端截图（含 Outlook 2013/2016/365、iOS Mail、Gmail App） - 本地测试可用
Litmus或Email on Acid，上传HTML后生成多端快照，重点看文字换行、按钮宽度、图片占位是否异常 - 务必在真实设备上收一封测试邮件：用自己三个邮箱（Gmail、iCloud、企业Exchange）分别接收，别信“响应式预览图”
- 特别注意中文场景：某些企业邮箱（如网易企业邮）会自动过滤含
font-weight: bold的段落，导致加粗失效
最麻烦的不是写不出效果，而是写出来的效果在某个客户端里莫名其妙消失——而且往往没报错、没提示、用户也不会告诉你哪错了。所以每次改完样式，都得重新过一遍核心客户端清单，而不是只点开一个浏览器确认。
