HTML邮件兼容性核心在于客户端差异：Outlook（Win）用Word引擎，不支持flex/grid/@media；Gmail剥离head样式且重写DOM；必须用table布局、内联样式、font标签，并通过litmus等工具实机测试。
HTML 邮件在主流客户端中存在显著兼容问题，不是“能不能用”，而是“哪些能用、哪些会崩、哪些必须绕开”——直接写现代 CSS 或 JS 基本等于发空白邮件。
Outlook（尤其是 Windows 版）为什么总把 flex 布局搞成一坨？
Windows Outlook 使用 Microsoft Word 渲染引擎（而非 IE/Edge），它不支持 display: flex、display: grid、@media 查询（部分版本）、float 也常失效。连 max-width 在某些 Outlook 版本里都会被忽略。
- 用
<table> 布局是目前唯一可靠方案，嵌套 <code><tr><td> 控制结构，宽度用 <code>width属性（非 CSS） - 响应式要靠
@media+!important+ 宽度重置，但需配合<div> 包裹并设 <code>style="display:none; max-height:0; overflow:hidden;"实现隐藏（Outlook 不识别display:none，所以得双保险） - 字体用
<font face="..."></font>比font-family更稳，尤其对 Outlook 2007–2019 - 避免
class或id，Gmail 可能删掉它们；也不要用!important，Gmail 会清除带该声明的整条样式 - 图片必须带
width和height属性（非 CSS），否则 Gmail Web 版可能拉伸或留白
Gmail 对内联样式和 CSS 的限制到底多狠？
Gmail 会剥离 中所有 CSS（包括 <style></style>），且仅保留部分内联 style 属性；更麻烦的是，它会重写 <div> 为 <code><div dir="ltr"> 并插入额外 <code><div> 包裹内容，导致 margin/padding 错乱。
<ul>
<li>所有样式必须内联，且只用 Gmail 支持的属性：如 <code>color、font-size、line-height、text-align 可靠；padding 在某些 Gmail App 版本中不生效，改用 <table><tr><td height="20"></td></tr></table> 空行替代
如何验证 HTML 邮件真正在目标客户端里长什么样？
本地预览毫无意义——浏览器渲染 ≠ Outlook 渲染 ≠ iOS Mail 渲染。真实效果只能靠实机+真实邮箱组合测试。
立即学习“前端免费学习笔记（深入）”；
- 用
litmus.com或emailonacid.com截图服务，覆盖 Outlook 2013/2016/2019/365（Win/Mac）、Gmail（Web/iOS/Android）、Apple Mail（iOS/macOS）、Yahoo、Thunderbird - 手动测试时，优先测 Outlook for Windows（最严）、Gmail App（Android）、iOS Mail（最宽松但有字体缩放 bug）
- 别信“已发送成功”——打开收件箱看源码：
View original（Gmail）或Message Source（Outlook），确认<style></style>是否被清空、table结构是否被重写
真正难的不是写出能跑的 HTML 邮件，而是让同一份代码在 Outlook 里不炸、在 Gmail App 里不塌、在 iOS 上不放大文字——每加一个 CSS 属性，都要查一遍 caniemail.com 的具体客户端支持表。漏掉一行兼容注释，就可能让 CTA 按钮消失在 Outlook 的 Word 引擎里。
