html邮件需适配多客户端私有渲染引擎：outlook用word引擎，仅支持内联样式和table布局；gmail剥离style标签且禁远程图；移动端media query兼容差，须用table+width+条件注释+fallback方案。
HTML 邮件不是网页，它依赖客户端渲染引擎，而主流邮件客户端（如 Outlook、Apple Mail、Gmail）用的不是 WebKit 或 Blink，而是老旧的、阉割的、私有化的 HTML/CSS 渲染器——这意味着你写的 <div> 很可能被自动转成 <code><table>，<code>flex 会被忽略，@media 在某些客户端根本不起作用。
Outlook 桌面版为什么总把 CSS 当空气？
Outlook Windows 版（2013–2021）使用 Microsoft Word 的渲染引擎，不支持大多数现代 CSS：不识别 display: flex、float、position，连 max-width 都只在部分版本中有限支持。它会主动剥离 <style></style> 标签里的规则，只认内联样式（style="..."）和部分 <table> 属性（如 <code>align、cellpadding）。
实操建议：
- 所有关键样式必须内联，不要依赖外部或
<style></style>块 - 布局优先用嵌套
<table>，列宽用 <code>width属性而非 CSS，避免colspan过度嵌套 - 用
<!--[if mso]>...<![endif]-->条件注释给 Outlook 单独塞兼容代码（例如补font-family或重置 padding） - 测试时务必用真实 Outlook 客户端，不能只靠浏览器模拟
- 用工具如 Mailchimp Inline CSS Tool 或
juice库做自动化内联，但之后要人工检查是否漏转 - 重要图文信息别只靠图片表达，文字内容必须可读（比如按钮文字+背景色+边框，别只靠一张带文字的图）
- 避免
background-image: url(...)，改用<img>+<table> 容器模拟背景区域 <li>所有图片加 <code>alt属性，并控制宽度用width属性（Gmail 不认max-width: 100%） - 采用“mobile-first table layout”：默认用单列
<table width="100%">，用 <code>width="100%"和align="center"控制居中 - 对需要双列的模块，用两个并排
<td>（非 <code><div>），并在 Gmail/Apple Mail 中靠 <code>width百分比控制；Outlook 则 fallback 到堆叠（靠<br>或额外<tr>） <li>如果必须用媒体查询，只写最简形式：<code>@media only screen and (max-width: 600px) { .wrapper { width: 100% !important; } }，并确保所有关键样式都有!important - 永远把「无 CSS 环境」当底线：去掉所有样式后，邮件仍应线性可读、链接可点、CTA 可见
Gmail 对 inline CSS 和远程图片的限制
Gmail 会剥离 <style></style> 标签，并将所有 CSS 规则转换为内联样式——但它只处理它“认得”的属性，比如会丢掉 background-image、border-radius、transform。更麻烦的是：Gmail Web 和 Gmail App 默认阻止远程图片加载，且不触发 onload，用户需手动点击“显示图片”才可见。
实操建议：
移动端适配为什么不能只靠 media query？
@media screen and (max-width: 600px) 在 Apple Mail、iOS Mail、Android Gmail App 中基本可用，但在 Outlook iOS/Android、Windows Mail、Yahoo Mail 移动端中完全无效。这些客户端要么无视媒体查询，要么只支持极简语法（如仅 min-width），甚至把整个 <style></style> 块干掉。
实操建议：
最常被忽略的一点：不同客户端对同一封邮件的解析顺序不一致——有的先执行 JS（虽然极少支持），有的先剥离注释，有的会重写 结构。所以别指望一次写完就能全端跑通，必须按客户端优先级逐个验证，尤其注意 Outlook for Mac（用 WebKit，但版本碎片化严重）和 Yahoo Mail（近年改用类似 Gmail 的渲染链，但仍有缓存 bug）。
