退款邮件必须适配outlook、gmail等客户端的渲染限制，采用table布局、内联样式、绝对url和脱敏字段，关键字段需与后端严格对齐，并经多端实测验证。
HTML退款通知邮件不是发个 <div> 就能直接用的，它必须适配 Outlook、Apple Mail、Gmail 等各种客户端的解析规则，否则用户看到的可能是错位、样式丢失甚至空白——核心问题不在“怎么写 HTML”，而在“怎么写 *能被邮件客户端正确渲染* 的 HTML”。<h3>为什么不能直接用现代 CSS 写退款邮件</h3>
<p>大多数邮箱客户端（尤其是 Outlook Desktop）不支持 Flex、Grid、<code>@media 查询（部分 Gmail 也不支持）、float 或外部样式表。它们只认内联 style 属性和极有限的 HTML 标签（比如不用 <section></section>，改用 <table>）。<ul>
<li>Outlook 使用 Word 渲染引擎，会过滤掉 <code>display: flex、margin、padding（部分版本）等属性
<style></style> 块，只保留内联样式退款通知邮件必须包含的关键字段与安全逻辑
除了视觉，业务字段缺失或格式错误会导致财务对账失败或用户投诉。这些字段不能靠占位符糊弄，得和后端订单/支付系统严格对齐：
-
order_id：必须可点击跳转至订单页（用完整 HTTPS 链接，不要相对路径） -
refund_amount：带货币符号和两位小数，如¥199.00；避免199或199.0 -
refund_status：明确写 “已到账”、“处理中” 或 “已退款”，不要用 “成功” 这类模糊词（“成功” 可能指申请成功，非到账） -
bank_card_last4或alipay_account：脱敏展示，前端不拼接卡号，由后端传入****1234这类值 - 必须包含客服联系方式（邮箱/电话），且是可点击的
mailto:或tel:链接
一个最小可用的兼容性退款邮件 HTML 片段
以下代码可在 Outlook 2016+、Gmail Web/App、Apple Mail 中稳定显示，无 JS、无外部资源：
<!-- 使用 table 布局，所有样式内联 -->
|
注意：width="600" 是为了适配主流客户端宽度限制；font-family 回退链必须写全；链接务必用绝对 URL；所有 <p></p> 内换行用 <br>，别依赖 margin。
测试环节最容易被跳过的三件事
发给同事看一眼 ≠ 邮件可用。真实环境里，问题往往出在测试盲区：
- 没在 Outlook 桌面版（不是网页版）打开过，结果发现
padding全失效、文字堆成一团 - 没检查 Gmail 移动 App —— 它会把长文本自动截断并加“查看更多”，导致关键金额被折叠
- 没验证退信地址（
Return-Path）是否配置正确，导致用户回复后邮件石沉大海（财务无法跟进）
真正上线前，至少要在 Litmus 或 Email on Acid 上跑一次多客户端快照；如果没预算，至少手动测 Outlook 2016/2019、iOS Mail、Gmail Android App 三个端。
