html邮件天生绑定兼容问题，必须用table布局、内联样式适配outlook，禁用display:none防gmail降级，图片需https绝对路径及alt属性，链接统一用https并避免target="_blank"。
HTML邮件和兼容问题不是“冲突”，而是“天生绑定”——所有HTML邮件都必须面对兼容问题，不存在绕开它的方案，只有权衡取舍的策略。
为什么Outlook会把<div>渲染成空白
<p>Outlook桌面版（2007–2019）使用Microsoft Word引擎解析HTML，不支持<code><div>、<code><section></section>、<flex></flex>、float、position等现代CSS布局特性。它只认<table>、<code><td>、内联<code>style和极有限的CSS属性（如color、font-size、padding）。
- 别用
class或外部CSS：Outlook直接忽略<style></style>标签和class="..."
- 用
<table>套<code><td>做布局，宽度写死（如<code>width="600"），避免百分比
-
padding在<td>上有效，在<code><div>上无效；<code>margin基本全失效
- 测试时务必打开Outlook 2016/2019本地客户端，网页版Outlook（OWA）和移动端表现完全不同
display: none在Gmail里突然显示了怎么办
Gmail会主动剥离<style></style>块，并过滤掉含display: none、visibility: hidden等隐藏样式的元素——但它不是简单删掉，而是可能把整段HTML当“可疑内容”降级处理，甚至导致后续样式错乱。
- 绝对不要在
<style></style>里写display: none；如需条件显示，改用<span style="display:none;font-size:0;line-height:0;"></span>并确保该<span></span>是独立<td>子元素
<li>Gmail对<code>!important极度敏感，尽量不用；它会重写你的内联样式优先级
- 想兼容Gmail又保持结构清晰？用
<div>仅作语义分组，所有可见样式必须落在<code><td>或<code><span></span>上，且用style=""重复声明
- 用
data-*属性做逻辑标记可以，但Gmail不读它们——别指望靠JS或自定义属性控制显隐
图片不显示、链接打不开的常见配置漏项
不是代码写错了，而是邮件客户端强制拦截未声明的资源加载行为。Gmail、Apple Mail、Outlook都会默认屏蔽远程图片，且部分客户端（如iOS Mail）会自动“修正”href中的URL协议。
- 所有
<img>必须带alt属性（否则Gmail显示红叉）、width/height（否则缩放异常），且src用HTTPS绝对路径
-
<a href="http://..."></a>要写成<a href="https://..."></a>；HTTP链接在iOS Mail里会被静默转为https://后404
- 避免
target="_blank"：Outlook忽略，Gmail可能禁用；如需新窗口，用target="_new"（非标准但实测更稳）
- 邮件中禁止使用
<base href="...">：几乎所有客户端都不支持，反而干扰链接解析
真正难的不是写一个能跑的HTML邮件，而是让同一份代码在Outlook 2013、Gmail App、Apple Mail、Android Gmail、OWA这五种环境里都“看起来差不多”。没有银弹，只有反复测试+渐进降级——比如先保证文字可读、链接可达，再谈间距、圆角、动画。漏掉任意一个客户端的真实渲染链路，上线后就是用户收不到关键按钮。
class或外部CSS：Outlook直接忽略<style></style>标签和class="..."
<table>套<code><td>做布局，宽度写死（如<code>width="600"），避免百分比
padding在<td>上有效，在<code><div>上无效；<code>margin基本全失效
display: none在Gmail里突然显示了怎么办
Gmail会主动剥离<style></style>块，并过滤掉含display: none、visibility: hidden等隐藏样式的元素——但它不是简单删掉，而是可能把整段HTML当“可疑内容”降级处理，甚至导致后续样式错乱。
- 绝对不要在
<style></style>里写display: none；如需条件显示，改用<span style="display:none;font-size:0;line-height:0;"></span>并确保该<span></span>是独立<td>子元素 <li>Gmail对<code>!important极度敏感，尽量不用；它会重写你的内联样式优先级 - 想兼容Gmail又保持结构清晰？用
<div>仅作语义分组，所有可见样式必须落在<code><td>或<code><span></span>上，且用style=""重复声明 - 用
data-*属性做逻辑标记可以，但Gmail不读它们——别指望靠JS或自定义属性控制显隐 - 所有
<img>必须带alt属性（否则Gmail显示红叉）、width/height（否则缩放异常），且src用HTTPS绝对路径 -
<a href="http://..."></a>要写成<a href="https://..."></a>；HTTP链接在iOS Mail里会被静默转为https://后404 - 避免
target="_blank"：Outlook忽略，Gmail可能禁用；如需新窗口，用target="_new"（非标准但实测更稳） - 邮件中禁止使用
<base href="...">：几乎所有客户端都不支持，反而干扰链接解析
图片不显示、链接打不开的常见配置漏项
不是代码写错了，而是邮件客户端强制拦截未声明的资源加载行为。Gmail、Apple Mail、Outlook都会默认屏蔽远程图片，且部分客户端（如iOS Mail）会自动“修正”href中的URL协议。
真正难的不是写一个能跑的HTML邮件，而是让同一份代码在Outlook 2013、Gmail App、Apple Mail、Android Gmail、OWA这五种环境里都“看起来差不多”。没有银弹，只有反复测试+渐进降级——比如先保证文字可读、链接可达，再谈间距、圆角、动画。漏掉任意一个客户端的真实渲染链路，上线后就是用户收不到关键按钮。
