HTML邮件在Outlook错位因使用Word引擎，不支持现代CSS；Gmail剥离样式且限制内联；iOS Mail忽略viewport需前置；验证须分层断言并真机测试。
HTML邮件为什么总在Outlook里错位
因为Outlook桌面版（2007–2019）用的是Microsoft Word渲染引擎，不是WebKit或Blink——它不支持float、flex、grid，连margin都只认margin-top和margin-bottom，margin-left/right基本无效。很多前端以为“写个响应式邮件就行”，结果一发Outlook就塌方。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<table>布局，嵌套不超过3层，cellpadding="0"、cellspacing="0"必须显式声明 - 所有宽度写成
width="600"（带单位的字符串），别用style="width: 600px"——Outlook会忽略 - 字体用
<font face="Helvetica, Arial, sans-serif">包裹文字，CSS里的font-family在部分Outlook版本中失效 - 图片必须加
style="display: block"，否则下方多出空白间隙（Word引擎对<img>默认行内对齐）
Gmail对内联CSS的诡异限制
Gmail会剥离<head>里的<style>，也拒绝!important，但更麻烦的是：它会把某些内联样式当“可疑”直接清空，比如含calc()、var(--color)或过长的background-image: url(...)。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有CSS必须内联，用工具如
juice或inline-css自动处理，别手写 - 避免
background简写，拆成background-color+background-image，且background-imageURL不能带空格或中文 - Gmail App（iOS/Android）会强制重写
font-size，所以正文文字务必用style="font-size: 16px"，别信1rem或medium - 链接颜色别依赖
a:link，每个<a>都加style="color: #0066cc"
响应式邮件在iOS Mail里缩放失灵
iOS Mail支持@media查询，但有个硬伤：它会忽略<meta name="viewport">标签，除非你把它放在<head>最开头（甚至早于<title>）。而且，如果表格宽度写了width="100%"但父容器没设max-width，它会撑破视口。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须是<head>第一个标签 - 主容器用
<div style="max-width: 600px; margin: 0 auto">包住整个<table>，别只靠width="100%" - 媒体查询里改
table的width属性值，而不是style——iOS Mail对内联style的覆盖优先级低于width属性 - 测试时真机必开“缩放”设置（设置 → 邮件 → 缩放），关掉它才能看到真实渲染
如何验证兼容性而不发100封测试邮件
手动群发测试成本高、反馈慢，且收不到Outlook Web（OWA）或Apple Mail的精确渲染差异。真正有效的验证不是“看一眼”，而是分层断言：结构是否完整、关键按钮是否可点、主图是否加载、文字是否可选。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
Mailchimp或Really Good Emails的预览工具查主流客户端快照，但仅作初筛 - 关键路径截图必须来自真实设备：用
Browsershots（支持Outlook 2016 Win10）、Email on Acid（含交互点击热区检测） - 自己搭一个最小测试页：只含
<table>、一个按钮、一张图、一段文字，发给自己，再用view-source:在Gmail里看原始HTML，确认内联是否生效、属性是否被删 - 永远保留一份纯文本备选版本（
Content-Type: multipart/alternative），有些企业邮箱（如IBM Notes）会直接弃用HTML部分
兼容性不是“适配所有”，而是守住核心信息链路：标题能读、主图可见、CTA按钮可点、链接能跳转。其余装饰性错位，用户其实不太在意——但他们绝对会在按钮点不了的时候立刻删掉这封邮件。
