邮件HTML必须用table布局、内联样式和属性式宽高，因Outlook用Word引擎不解析div，Gmail剥离class，Apple Mail无视id/class，现代CSS如flex、media、border-radius等均失效或引发塌陷。
邮件系统里没有“兼容性方案”，只有“能发出去不塌的写法”——table是唯一布局容器，style属性是唯一生效样式载体，width和height属性比CSS更优先，否则Outlook错位、Gmail空白、Apple Mail断行不是bug，是必然结果。
为什么不能用 + CSS写邮件HTML
Outlook桌面版用Word引擎，根本不解析div；Gmail会整块剥离<style></style>标签和所有class；Apple Mail对id和class基本无视。你写的<div class="header">Hello</div>在三端中等于没写。
-
display: flex、@media、background-image、border-radius这些在网页里习以为常的东西，在邮件里要么被忽略，要么导致整段塌陷
-
<p></p>会被Outlook自动包裹换行、重置边距，造成文字间距失控
-
margin在Gmail App里不渲染，padding在Outlook中表现极不稳定（尤其padding-top常被吃掉）
table嵌套必须严格三层：<table> → <tr> → <td>
不是“用table就行”，而是必须按固定层级嵌套，跳级或混入div会导致Outlook错位。
- 外层容器用
<table width="600" align="center">，别写<code>style="width: 600px"——Outlook更认width属性本身
- 横向分栏不用
float或inline-block，改用<td width="300">并列
<li>需要响应式堆叠？再套一层<code><table width="100%">，移动端靠<code>width="100%"强制单列，别信@media
- 避免
colspan和rowspan——Outlook 2013+支持极不稳定，宁可用空<td>占位
<h3>内联样式必须手写，不能靠工具自动转</h3>
<p>工具如Roadie能帮你把CSS类展开，但无法修复Outlook对<code>padding的忽略、Gmail对line-height: 1.4（无单位）的误读，或Apple Mail对font-size: 14px和14em的混淆。
立即学习“前端免费学习笔记（深入）”；
- 写
padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px;，别简写成padding: 12px 16px;
- 字体必须显式声明单位：
font-size: 14px;、line-height: 20px;，而不是line-height: 1.4em
- 背景色优先设在
<table bgcolor="#f0f0f0">上，<code><td style="background-color:#f0f0f0">在Outlook里渲染不可靠
<li>图片必须带<code>width和height属性，且src是HTTPS绝对路径，否则Outlook显示占位符、Gmail直接block
隐藏内容必须用hybrid写法，display: none在Gmail App里无效
Gmail（尤其是iOS/Android App）会主动剥离style属性中的display、visibility、opacity声明，只保留极简子集。你写的style="display: none;"发过去就没了。
- 需要隐藏内容（比如“仅桌面显示”区块），必须用hybrid写法：
<div style="display: none; max-height: 0; overflow: hidden;">
<li>字体多层回退必须真实有效：<code><font face="Arial, sans-serif" size="2"></font>双兜底，font-family在Outlook 2007–2019中经常失效
-
DOCTYPE必须用XHTML Strict：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">，HTML5的doctype不被识别
真正难的不是写对一行代码，而是放弃所有现代前端直觉——每加一个div、每写一个@media、每省一个width属性，都在增加某台Outlook里突然错位的概率。这不是技术选型问题，是渲染引擎的物理限制。
Outlook桌面版用Word引擎，根本不解析div；Gmail会整块剥离<style></style>标签和所有class；Apple Mail对id和class基本无视。你写的<div class="header">Hello</div>在三端中等于没写。
-
display: flex、@media、background-image、border-radius这些在网页里习以为常的东西，在邮件里要么被忽略，要么导致整段塌陷 -
<p></p>会被Outlook自动包裹换行、重置边距，造成文字间距失控 -
margin在Gmail App里不渲染，padding在Outlook中表现极不稳定（尤其padding-top常被吃掉）
table嵌套必须严格三层：<table> → <tr> → <td>
不是“用table就行”，而是必须按固定层级嵌套，跳级或混入div会导致Outlook错位。
- 外层容器用
<table width="600" align="center">，别写<code>style="width: 600px"——Outlook更认width属性本身 - 横向分栏不用
float或inline-block，改用<td width="300">并列 <li>需要响应式堆叠？再套一层<code><table width="100%">，移动端靠<code>width="100%"强制单列，别信@media - 避免
colspan和rowspan——Outlook 2013+支持极不稳定，宁可用空<td>占位 <h3>内联样式必须手写，不能靠工具自动转</h3> <p>工具如Roadie能帮你把CSS类展开，但无法修复Outlook对<code>padding的忽略、Gmail对line-height: 1.4（无单位）的误读，或Apple Mail对font-size: 14px和14em的混淆。立即学习“前端免费学习笔记（深入）”；
- 写
padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px;，别简写成padding: 12px 16px; - 字体必须显式声明单位：
font-size: 14px;、line-height: 20px;，而不是line-height: 1.4em - 背景色优先设在
<table bgcolor="#f0f0f0">上，<code><td style="background-color:#f0f0f0">在Outlook里渲染不可靠 <li>图片必须带<code>width和height属性，且src是HTTPS绝对路径，否则Outlook显示占位符、Gmail直接block - 需要隐藏内容（比如“仅桌面显示”区块），必须用hybrid写法：
<div style="display: none; max-height: 0; overflow: hidden;"> <li>字体多层回退必须真实有效：<code><font face="Arial, sans-serif" size="2"></font>双兜底，font-family在Outlook 2007–2019中经常失效 -
DOCTYPE必须用XHTML Strict：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">，HTML5的doctype不被识别
隐藏内容必须用hybrid写法，
display: none在Gmail App里无效Gmail（尤其是iOS/Android App）会主动剥离
style属性中的display、visibility、opacity声明，只保留极简子集。你写的style="display: none;"发过去就没了。真正难的不是写对一行代码，而是放弃所有现代前端直觉——每加一个
div、每写一个@media、每省一个width属性，都在增加某台Outlook里突然错位的概率。这不是技术选型问题，是渲染引擎的物理限制。 - 写
