付款确认邮件必须用 XHTML 1.0 Transitional Doctype、table 布局、全内联样式，禁用 HTML5 标签、外部 CSS、Flexbox、Grid 和媒体查询；因 Outlook 等客户端基于老旧渲染引擎，仅支持表格+内联样式这一“降级到 2005 年”的兼容方案。
HTML 付款确认邮件不是前端页面，不能依赖 JavaScript 或外部 CSS；它必须是内联样式、语义化标签、高度兼容的纯 HTML 表格布局，否则在 Outlook、Apple Mail、Gmail 等客户端会错位或丢失样式。
为什么不能用 flex 或 grid 布局
绝大多数邮件客户端（尤其是 Outlook Desktop 和 iOS Mail）不支持现代 CSS 布局。Outlook 甚至会直接忽略 style 标签里的大部分声明，只认 table + width + 内联 style 属性。
- Outlook 2016/2019/365：禁用
display: flex、display: grid，且对@media支持极弱 - Gmail Web：会剥离
<style></style>块，只保留内联 - iOS Mail：支持部分
@media，但不支持min-width查询，需用max-device-width
<table> 布局的关键写法
<p>用嵌套 <code>table 模拟“容器-行-列”，所有宽度用像素（px）或百分比（%），避免 auto 或 fit-content。
- 外层
table 设 width="100%" 和 max-width="600px"（适配移动端收窄）
- 每列用
<td width="300"> 显式控制，不要靠 <code>colspan 拼凑
- 文字颜色、字体、行高全部走内联：
style="color:#333;font-family:Arial,sans-serif;line-height:1.4;"
- 图片必须加
width 和 height 属性，并设 style="display:block;" 防空白间隙
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="padding:20px 0;">
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:Arial,sans-serif;color:#333;font-size:16px;">
您的订单已支付成功
</td>
</tr>
</table>
</td>
</tr>
</table>
动态内容怎么安全插入（如订单号、金额）
table 设 width="100%" 和 max-width="600px"（适配移动端收窄）<td width="300"> 显式控制，不要靠 <code>colspan 拼凑
style="color:#333;font-family:Arial,sans-serif;line-height:1.4;"
width 和 height 属性，并设 style="display:block;" 防空白间隙邮件模板本身是静态 HTML，变量替换由后端完成。关键原则：所有占位符必须是纯文本格式，不能带引号、括号或特殊字符包裹，否则易被邮箱过滤或解析失败。
立即学习“前端免费学习笔记（深入）”；
- 推荐占位符格式：
{{order_id}}、{{amount}}、{{payment_time}}—— 后端正则替换时无歧义 - 金额字段务必转为两位小数字符串：
"{{amount|number_format(2)}}"，避免199.0显示成199 - 时间字段建议用 ISO 格式：
{{payment_time|date("Y-m-d H:i:s")}}，不依赖客户端时区 - 禁止在 HTML 中拼接 URL 参数（如
?id={{order_id}}），应由后端生成完整链接再填入href
发信前必须验证的三件事
一封能进收件箱、不被当垃圾邮件、排版不崩的付款邮件，靠的不是“写得漂亮”，而是这三点是否闭环。
- 用
https://putsmail.com/或Mailtrap测试渲染效果，重点看 Outlook 和 Gmail App - 检查所有链接是否为 HTTPS，HTTP 链接在 Apple Mail 中会被自动屏蔽
- 确保
<title></title>和首段文字含关键词如“付款成功”“订单确认”，避免触发反垃圾规则（如纯图邮件、无文本正文）
最常被忽略的是图片 alt 文本和文本占比 —— 如果整封邮件只有 logo 图+一行字，很多企业邮箱会直接归类为推广邮件。至少保持文字内容 >60%，且每张图都带描述性 alt。
