为什么 HTML 邮件这么难写：常见兼容问题与排版技巧

结论：HTML 邮件难写，根本原因不是邮件本身复杂，而是收件端渲染邮件的根本不是现代浏览器——Outlook 2007 及之后的 Windows 桌面版（含 Microsoft 365 桌面版）直接用 Microsoft Word 的排版引擎渲染邮件，不认 flex、grid、max-width、border-radius；Gmail 会重写你的文档结构。所以写邮件的正确姿势是退回 2005 年：table 布局 + 600px 定宽 + 样式全部内联。

为什么同一个 HTML 在浏览器里正常，在邮件里就散了？

结论：因为邮件客户端用的是四类完全不同的渲染引擎，能力差距横跨十几年。

第一类是 Word 引擎。Outlook 2007、2010、2013、2016、2019 和 Microsoft 365 桌面版（Windows）全部使用它。它支持 table、基础 CSS 和条件注释，不支持 flex、grid、max-width、position、border-radius、CSS 背景图，也不支持媒体查询。

第二类是 WebKit 引擎。Apple Mail 和 iOS Mail 属于这一档，flex、媒体查询、@font-face 都能跑，是支持度最高的一档。

第三类是 Blink/WebKit。Gmail 网页版和 Gmail App 属于这一档，支持 <style> 标签和媒体查询，但会重写文档结构、剥离部分选择器。

第四类是只认内联样式的老客户端，比如部分 Android 自带邮件 App 和一些企业邮箱，<style> 标签会被直接删掉。同一份 HTML 在这四类引擎里结果必然不同，这就是「浏览器里好好的，发出去全乱」的原因。

600px 定宽和 table 布局到底怎么写？

结论：外层 table 100% 居中、内层 table 固定 600px，是最通用的结构。

600px 是邮件正文的行业标准宽度，因为大部分客户端预览窗格按这个宽度排版。内层表格的宽度要同时写 HTML 属性和 CSS，因为 Outlook 只认属性：

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr><td align="center">
    <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"
           style="width:600px;max-width:600px;">

三个细节必须注意：一是 role="presentation"，告诉屏幕阅读器这是排版表格而非数据表格；二是所有 td 都补上 align 和 valign，Outlook 不继承父级对齐；三是用 td 的 padding 做间距，不要用 margin——Outlook 对段落 margin 的处理会导致间距翻倍。

样式该内联还是写在 <style> 里？

结论：决定布局的样式必须内联，<style> 只用来做渐进增强。

Gmail 支持 <style>，Outlook 桌面版支持但会忽略其中的媒体查询和复杂选择器，老客户端直接删除整个标签块。所以工程做法是：开发时正常写 class，发送前用 Premailer、email-inline 或 MJML 的 mj-style inline 自动转成行内样式，同时保留 <style> 里的 @media 规则给 Apple Mail 和 Gmail 做响应式。

字体也别指望自定义：@font-face 在 Outlook 和 Gmail 里会被剥掉，字体栈就写系统字体，例如 font-family:Arial, Helvetica, sans-serif。

图片和深色模式要注意什么？

结论：每张图片都要写 alt、width、height 和 display:block，并且主动适配深色模式。

Outlook 桌面版默认拦截外部图片，用户点击「下载图片」前只显示 alt 文本；Gmail 则通过 Google 图片代理加载。所以 alt 不是可选项，同时要显式给出 width 和 height，避免图未加载时布局跳动。style="display:block;border:0;" 是必须的，因为图片默认是行内元素，Gmail 会在图片下方留出 3-4px 的基线空隙，撑破你的表格高度。

深色模式下，Apple Mail 和 Outlook.com 会自动反色。在 <head> 中加上 <meta name="color-scheme" content="light dark"> 和 <meta name="supported-color-schemes" content="light dark">，避免纯白背景配纯黑文字被强制反转后对比度崩塌；logo 用透明 PNG，或放进带底色的色块里。

Outlook 里做圆角按钮和背景图，只能靠条件注释加 VML 回退：

<!--[if mso]><v:roundrect arcsize="10%" fillcolor="#0066cc"><![endif]-->

有没有更省事的写法？

结论：用 MJML 生成 table 布局，比手写靠谱得多。

MJML 编译输出的是嵌套 table 加内联样式，一条命令就能出稿：

npx mjml input.mjml -o output.html

发送前至少在 Gmail 网页版、Gmail App、Outlook.com、Outlook 2019 桌面版、Apple Mail（iOS）这五个环境各测一遍，测试工具可用 Litmus 或 Email on Acid。

HTML 邮件的本质是「写给一群不听话的排版引擎看的降级页面」：table 兜布局、600px 定宽、样式内联兜渲染、条件注释兜 Outlook、display:block 兜图片缝。把这五件事固定成模板，之后每次改文案改图片，就不会再翻车。