Outlook表格塌陷是因使用Word引擎解析HTML，会重写结构、忽略现代CSS；Gmail则剥离style标签只认内联样式。解决需彻底降级：外层用table控制布局、所有样式内联、避免div/p、图片带宽高属性、字体栈补全、禁用flex/grid等。
为什么Outlook里表格塌了，但Gmail里看起来正常
不是代码写错了，是Outlook用Word引擎解析HTML，它会主动重写结构：自动闭合未闭合标签、给文本加<p>、吃掉padding、忽略display: flex。Gmail则直接剥离<style>标签，只认style属性。同一份代码在不同客户端走的是完全不同的解析路径。
- Outlook桌面版：拒绝
<div>、<p>，colspan/rowspan支持极差，margin基本无效 - Gmail Web/App：删
<head>和所有<style>，@media仅部分支持，background-image被忽略 - iOS Mail：支持有限
@media，但flex和grid照样不认 - Apple Mail：对
font-family回退链敏感，rem单位直接失效
怎么写才能让表格不塌、文字不错位
靠“降级”而不是“兼容”。现代CSS不是加个fallback就能跑，而是得从头用客户端认的写法重建布局。
- 外层容器必须用
<table width="600" style="width:600px;max-width:600px;margin:0 auto;">，不能只靠CSS控制宽度 - 横向分栏不用
float或display: inline-block，改用<tr><td width="50%">，需要堆叠就再套一层<table width="100%"> - 所有文本必须包在
<td>里，禁止直接写在<tr>或<table>中 -
<img>必须同时带width和height属性（不是只写style），并加style="display:block;"消除底部空白 - 字体栈写成
font-family: 'Open Sans', Helvetica, Arial, sans-serif;，避免Windows下Open Sans缺失时直接崩成Times New Roman
内联样式不是“推荐”，是唯一生效路径
<style>标签在Gmail里整块消失，Outlook当空气，Yahoo Mail只留@media以外的规则——你写的每一条CSS，如果没塞进里，等于没写。
- 连
class="btn"都别用，客户端根本不解析class名 -
line-height用无单位值（如1.4）或px，禁用em/rem - 颜色不要只写
#000，补全color:#000000;，某些客户端会截断简写 - 链接必须显式设
style="color:#0066cc;text-decoration:underline;"，否则Outlook用默认蓝+下划线，Gmail可能去色
响应式邮件真能适配手机？
能，但不是靠一套代码通吃。真正的响应式是“条件性降级”：用@media给支持的客户端（iOS Mail、Gmail App）加断点，同时用width="100%"表格兜底给Outlook桌面版。
立即学习“前端免费学习笔记（深入）”；
- 外层
<table>加role="presentation"，告诉屏幕阅读器这只是布局，不是数据表 - 媒体查询只写
@media screen and (max-width: 600px)，不要嵌套复杂选择器 - 移动端单列靠
<table width="100%">包裹原<td>，而不是靠display:block - 测试时必须真机截图，模拟器看不出Outlook对
padding的诡异处理
最易被忽略的点：没有JavaScript兜底，没有DevTools调试，发出去就定型。所谓“维护”，其实是每次改完都得在Gmail、Outlook Desktop、Outlook iOS、Apple Mail四端手动点开看——少一端，就可能有用户看到错位按钮或消失图片。
