Outlook因使用MS Word渲染引擎而不支持Flexbox，直接忽略display: flex；需用table布局、内联CSS及兼容属性，并重点测试Outlook 2013/2016/2019。
为什么 Outlook 会把 display: flex 当作不存在
因为 Outlook（尤其是 Windows 版本，基于 MS Word 渲染引擎）根本不支持 Flexbox，连 display: flex 这个声明都会被直接忽略——不是渲染错，是压根不读。它只认老式表格布局和极有限的内联 CSS。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有结构级布局必须用
<table>套嵌，width用像素值（如width="600"），避免百分比或max-width - 禁用
float、position、flex、grid等现代布局属性 - CSS 尽量写成内联（
style="..."），且只用 Outlook 支持的属性：比如font-family、color、padding（但注意 Outlook 对padding-top支持不稳定，优先用height或空<td>代替） - 测试时重点看 Outlook 2013/2016/2019（桌面版），它们比 Outlook.com 更“古董”
如何让 Gmail 正确显示背景图和字体
Gmail 会剥离 <head> 中的 <style> 标签，且对 background-image 的支持极弱——即使写成内联，多数客户端也会丢掉 URL 或整个声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 背景图改用
<table>+background属性（HTML 属性，非 CSS）：<td background="https://example.com/bg.jpg">，并配bgcolor作降级色 - 字体优先用 Web-safe 字体栈，例如：
font-family: Arial, Helvetica, sans-serif;；避免@import或font-face，Gmail 会过滤 - Gmail App（Android/iOS）还可能禁用外部图片，默认关闭图片加载，所以关键信息不能只靠图片表达
- 如果必须用图标，用 Unicode 字符（如 ✅）或 Base64 内嵌小图（但注意 Base64 在部分客户端有长度限制）
<link rel="stylesheet"> 在 HTML 邮件里为什么总是失效
几乎所有主流邮件客户端（Outlook、Gmail、Apple Mail、Yahoo）都会剥离外部样式表，包括 <link> 和 @import。这不是 bug，是安全策略——防止远程加载、追踪或注入。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 彻底放弃外部 CSS，所有样式必须内联（inline）到每个标签的
style属性中 - 可用工具辅助：比如 email-comb 或 inlineresponsivelayouts，但注意它们不会修复语义错误，只是搬运 CSS
- 不要依赖 CSS 选择器做响应式断点（如
@media），虽然 Apple Mail 和 iOS Mail 支持，但 Outlook 和 Gmail 完全无视；真要适配移动端，得靠<table>嵌套 +width+ 条件注释（如<!--[if mso]>...<![endif]-->）
为什么测试时在浏览器里看着好好的，发出去就乱了
因为浏览器渲染的是完整 HTML/CSS 环境，而邮件客户端是各自为政的“碎片化沙盒”：有的用 WebKit（Apple Mail），有的用 Trident（旧 Outlook），有的用定制引擎（Gmail），还有的会预处理 HTML（如剥离脚本、重写链接、压缩空格）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远以真实客户端截图为准，别信浏览器预览——推荐用 Email on Acid 或 Litmus 做多端快照
- 避免使用
<div>布局，哪怕只是容器；<div>在 Outlook 中常被转成<p>或直接忽略 - 所有图片加
alt属性，并设width/height固定尺寸，否则某些客户端（如 Outlook）会拉伸变形 - 链接务必用绝对 URL，相对路径会被客户端丢弃或解析错误
最麻烦的不是写法，而是每改一行都要重新上传、发送、截图、比对——兼容性不是一次搞定的事，是每次发信前都得过一遍的 checklist。
