HTML邮件模板必须用table布局、内联style、显式width/height属性，禁用div/CSS现代特性，否则在Outlook、Gmail、Apple Mail中必然错位或空白。
直接说结论：高性能邮件营销系统里，HTML模板的兼容性结构不是“加点兼容补丁”就能解决的，它必须从第一行代码就放弃现代前端思维——table是唯一可信的布局容器，style属性是唯一可信的样式载体，width和height属性比CSS更优先，否则发出去的邮件在Outlook里错位、Gmail里空白、Apple Mail里断行，不是bug，是必然结果。
为什么不能用 + CSS写邮件模板
Outlook桌面版用的是Word HTML引擎，根本不解析div标签；Gmail会整块剥离style标签和class属性；Apple Mail对id和class基本无视。你写的<div class="header">Hello</div>在三端中等于没写。
-
display: flex、max-width、@media在绝大多数客户端中被完全忽略或导致整段塌陷
-
margin在Gmail App里不渲染，padding在Outlook中表现极不稳定（尤其padding-top常被吃掉）
-
<p>会被Outlook自动包裹换行、重置边距，造成文字间距失控
- 哪怕只加一个
line-height: 1.4（无单位），Gmail也会误读为1.4em，导致行高爆炸
table嵌套结构怎么写才真正稳
不是“用table就行”，而是必须严格遵循三层嵌套+显式属性的写法，否则Outlook仍可能错位。
- 外层容器必须是
<table width="600" align="center">，不能只写style="width: 600px;"——Outlook认width属性本身，不认CSS宽度
- 所有内容必须包在
<table> → <tr> → <td>结构里，禁止跳级（如<table><td><table>可以，<table><div><td>不行）
- 横向分栏不用
float或inline-block，改用并列<td width="300">，并确保总宽=外层width
- 避免
colspan/rowspan——Outlook 2013+ 渲染极不可靠，宁可用空<td>占位
- 垂直居中文字必须用
<td valign="middle">，vertical-align: middle在Outlook里无效
内联样式必须手写，不能依赖转换工具
工具如Roadie或htmlemail.io能帮你把CSS类展开，但无法修复客户端底层逻辑缺陷。
立即学习“前端免费学习笔记（深入）”；
- 写
padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px;，别简写成padding: 12px 16px;（Outlook会丢掉后两个值）
- 字体大小和行高必须带单位：
font-size: 14px;、line-height: 20px;，禁用1.4或1.4em
- 背景色优先设在
<table bgcolor="#f0f0f0">上，<td style="background-color:#f0f0f0">在Outlook里常失效
- 图片必须带
width和height属性，且src为HTTPS绝对路径，否则Outlook显示占位符、Gmail直接block
-
display: none在Gmail App里会被主动剥离，隐藏内容得用hybrid写法（条件注释+width="0"+overflow="hidden"）
最易被忽略的一点：所有font-family必须提供多层回退，且首项不能是中文或自定义字体——'PingFang SC', 'Helvetica Neue', Arial, sans-serif在Windows Outlook里会直接回退到Times New Roman；而<font face="Arial, Helvetica, sans-serif">虽过时，但在Outlook中反而比CSS更可靠。这不是妥协，是邮件渲染引擎决定的硬边界。
Outlook桌面版用的是Word HTML引擎，根本不解析div标签；Gmail会整块剥离style标签和class属性；Apple Mail对id和class基本无视。你写的<div class="header">Hello</div>在三端中等于没写。
-
display: flex、max-width、@media在绝大多数客户端中被完全忽略或导致整段塌陷 -
margin在Gmail App里不渲染，padding在Outlook中表现极不稳定（尤其padding-top常被吃掉） -
<p>会被Outlook自动包裹换行、重置边距，造成文字间距失控 - 哪怕只加一个
line-height: 1.4（无单位），Gmail也会误读为1.4em，导致行高爆炸
table嵌套结构怎么写才真正稳
不是“用table就行”，而是必须严格遵循三层嵌套+显式属性的写法，否则Outlook仍可能错位。
- 外层容器必须是
<table width="600" align="center">，不能只写style="width: 600px;"——Outlook认width属性本身，不认CSS宽度 - 所有内容必须包在
<table> → <tr> → <td>结构里，禁止跳级（如<table><td><table>可以，<table><div><td>不行） - 横向分栏不用
float或inline-block，改用并列<td width="300">，并确保总宽=外层width - 避免
colspan/rowspan——Outlook 2013+ 渲染极不可靠，宁可用空<td>占位 - 垂直居中文字必须用
<td valign="middle">，vertical-align: middle在Outlook里无效
内联样式必须手写，不能依赖转换工具
工具如Roadie或htmlemail.io能帮你把CSS类展开，但无法修复客户端底层逻辑缺陷。
立即学习“前端免费学习笔记（深入）”；
- 写
padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px;，别简写成padding: 12px 16px;（Outlook会丢掉后两个值） - 字体大小和行高必须带单位：
font-size: 14px;、line-height: 20px;，禁用1.4或1.4em - 背景色优先设在
<table bgcolor="#f0f0f0">上，<td style="background-color:#f0f0f0">在Outlook里常失效 - 图片必须带
width和height属性，且src为HTTPS绝对路径，否则Outlook显示占位符、Gmail直接block -
display: none在Gmail App里会被主动剥离，隐藏内容得用hybrid写法（条件注释+width="0"+overflow="hidden"）
最易被忽略的一点：所有font-family必须提供多层回退，且首项不能是中文或自定义字体——'PingFang SC', 'Helvetica Neue', Arial, sans-serif在Windows Outlook里会直接回退到Times New Roman；而<font face="Arial, Helvetica, sans-serif">虽过时，但在Outlook中反而比CSS更可靠。这不是妥协，是邮件渲染引擎决定的硬边界。
