不是倒退，是必要妥协；因Gmail剥离style标签、Outlook用Word引擎不支持Flex/Grid、iOS Mail媒体查询不稳定，table布局与内联样式才是跨客户端唯一可靠方案。
为什么现代邮件客户端会忽略 flex 和 grid
因为绝大多数邮件客户端（包括 Gmail、Outlook 桌面版、Apple Mail）根本不支持 CSS Flexbox 或 Grid 布局。它们依赖的是上世纪 90 年代的渲染引擎，只认 <table> 结构和内联样式。
<p>如果你用现代 CSS 写了个“响应式”促销邮件，发出去后在 Outlook 里变成一列堆叠、Gmail 里图片错位、iOS 邮件里文字全挤在左上角——不是代码写错了，是直接没被解析。</p>
<ul>
<li>强制所有样式写成 <code>style="..." 内联形式，外部 <style></style> 标签或 @media 查询基本无效（Gmail Web 版近年有限支持 @media，但 iOS 和 Outlook 完全不认）
<div> 可以用，但不能依赖它的布局能力；必须用 <code><table> 套嵌控制宽高、对齐、间距
<li>字体慎用 <code>font-family 自定义栈，优先用 "Helvetica Neue", Arial, sans-serif 这类系统级安全字体
width 和 max-width 在邮件里根本不是一回事
桌面端 Outlook（尤其是 Windows 版）会完全忽略 max-width，只认固定 width；而 iOS 邮件又对超宽表格自动缩放导致文字糊成一片。折中解法是：用 <table width="600"> 定死容器宽度，再套一层 <code><div style="max-width:600px; margin:0 auto;"> 兼容 Web 端。
<ul>
<li>主容器统一设为 <code>width="600"（这是行业通用安全宽度，适配大多数客户端）
width 和 height 属性，否则 Outlook 会默认按原始尺寸拉伸，撑破布局vw、% 做宽度（Outlook 把 width="100%" 当成字面意思，可能溢出屏幕）<td height="20"></td> 或带 padding 的空单元格，别信 margin
优惠码按钮点不了？检查 <a></a> 标签有没有被 <div> 包住
<p>Outlook for Windows 会静默丢弃嵌套在 <code><div> 里的 <code><a></a> 标签，导致“立即抢购”按钮变成纯文本——用户点不动，你也收不到点击数据。
立即学习“前端免费学习笔记（深入）”；
- 按钮必须用
<table> + <code><td> + <code><a></a>组合实现，例如：<table role="presentation" cellspacing="0" cellpadding="0"> <tr> <td align="center" bgcolor="#FF6B35" style="border-radius:4px;"> <a href="https://example.com?code=SALE20" style="display:block;padding:12px 24px;color:#ffffff;text-decoration:none;font-weight:bold;">立即使用优惠码 SALE20</a> </td> </tr> </table> - 链接必须带完整协议（
https://），相对路径或//开头的会被 Outlook 截断 - 避免在
<a></a>上写target="_blank"—— 大部分邮件客户端不支持，且可能触发垃圾邮件过滤 - Outlook for Windows（不是 Web 版）：用真实安装版测，虚拟机或截图工具不行；它有自己的 Word 渲染引擎，
background-image、border-radius全部失效 - iOS Mail（iPhone + iPad）：注意深色模式下
#FFFFFF文字在黑色背景上直接消失；测试时打开“深色外观”开关 - Gmail App（Android）：它会重写你的
，把所有class删光，只保留内联style；所以 class 名再优雅也没用
测试阶段最容易漏掉的三类客户端
本地预览正常 ≠ 用户收到正常。真正要测的不是 Chrome，而是那些你平时不用、但用户天天开的客户端。
复杂点在于：同一封邮件，在 Outlook 里要靠
