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能安全使用？

坚持“表格布局 + 行内样式”仍是目前最稳妥的方案。不是因为优雅，是因为实测有效。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

可放心使用的组合：

• 用 <table> 做整体结构，嵌套 <code><tr><td> 控制对齐和间距 <li>所有样式必须写成行内 <code>style="..."，不要依赖 <style></style> 或外部CSS
• 字体用 font-family: "Helvetica Neue", Arial, sans-serif; 这类安全栈，避免仅写 "PingFang SC"
• 颜色用十六进制（如 #333333），别用 rgb() 或命名色（darkgray 在 Outlook 中可能变成黑色）
• 图片必须带 alt 属性，并设 width 和 height（防止Gmail拉伸）

Gmail和Outlook的典型兼容陷阱

这两个是绕不开的“兼容性双雄”，出问题频率最高：

• Gmail 会移除整个 和所有 <style></style> 标签，然后把剩余CSS规则“暴力内联”到元素上——导致选择器冲突、伪类丢失、媒体查询失效
• Outlook Desktop（Windows）用 Word HTML 渲染器，不支持 max-width，margin 大概率被忽略，padding 在 <td> 上才稳定 <li>Outlook.com（网页版）支持部分现代CSS，但和 Outlook Desktop 表现不一致，必须分开测试</li> <li>如果用了 <code>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 的段落，导致加粗失效

最麻烦的不是写不出效果，而是写出来的效果在某个客户端里莫名其妙消失——而且往往没报错、没提示、用户也不会告诉你哪错了。所以每次改完样式，都得重新过一遍核心客户端清单，而不是只点开一个浏览器确认。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！