付款确认邮件必须用 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> 块，只保留内联 style=""
• iOS Mail：支持部分 @media，但不支持 min-width 查询，需用 max-device-width

<table> 布局的关键写法 <p>用嵌套 <code>table 模拟“容器-行-列”，所有宽度用像素（px）或百分比（%），避免 auto 或 fit-content。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 外层 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！