不是倒退，是必要妥协；因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> 组合实现，例如：

  立即使用优惠码 SALE20

• 链接必须带完整协议（https://），相对路径或 // 开头的会被 Outlook 截断
• 避免在 <a></a> 上写 target="_blank" —— 大部分邮件客户端不支持，且可能触发垃圾邮件过滤

测试阶段最容易漏掉的三类客户端

本地预览正常 ≠ 用户收到正常。真正要测的不是 Chrome，而是那些你平时不用、但用户天天开的客户端。


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• Outlook for Windows（不是 Web 版）：用真实安装版测，虚拟机或截图工具不行；它有自己的 Word 渲染引擎，background-image、border-radius 全部失效
• iOS Mail（iPhone + iPad）：注意深色模式下 #FFFFFF 文字在黑色背景上直接消失；测试时打开“深色外观”开关
• Gmail App（Android）：它会重写你的 ，把所有 class 删光，只保留内联 style；所以 class 名再优雅也没用

复杂点在于：同一封邮件，在 Outlook 里要靠