发货通知邮件必须用table布局+内联样式，因Outlook、Gmail等客户端不支持Flex/Grid；主容器width="600"，按钮用table模拟，图片用绝对URL，占位符服务端替换，务必在Outlook for Windows和多端测试。
直接用 HTML 写发货通知邮件，核心不是“多好看”，而是“在 Outlook、QQ 邮箱、iPhone 邮件等一堆客户端里不崩、文字能看清、按钮能点”。纯现代 CSS（Flex/Grid/变量）基本废掉，必须回归 1990 年代表格布局 + 内联样式的老路。
为什么不能用现代 HTML/CSS 写邮件模板
因为主流邮件客户端对 CSS 支持极差：Outlook（尤其是 Windows 版）只认 <table> 布局和内联 style；Gmail 会剥离 <head> 和外部样式；iOS 邮件虽支持部分 Flex，但一旦嵌套或加动画就错位。你写的 display: flex 很可能变成一坨堆叠文字。
实操建议：
- 所有样式必须写成内联
style="..."，连<style>标签都别加 - 用
<table>控制整体结构，cellpadding/cellspacing设为 0 - 字体统一用安全栈：
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif - 图片必须带
alt和明确的width/height，否则 Outlook 会撑开容器 - 避免
float、position、@media（响应式要靠条件注释或双层表格）
<table> 布局怎么写才不翻车
不是套个 <table> 就行——得用“单列嵌套表”结构：外层 <table width="600"> 固定宽度（适配多数客户端），里面每块内容（标题、物流信息、按钮）各自用一个 <tr><td> 包住，再需要分栏时才在 <td> 里套新 <table>。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：在 QQ 邮箱里内容左偏、按钮变超宽、文字换行错乱。
实操建议：
- 主容器
<table>必须设width="600"（不要用max-width） - 每个
<td>加valign="top"，防止文字垂直居中失效 - 按钮不用
<a>+ CSS 模拟，老实用<table>套出按钮形状：<table cellspacing="0" cellpadding="0"> <tr> <td align="center" bgcolor="#007bff" style="border-radius: 4px;"> <a href="https://example.com/track" target="_blank" style="display: inline-block; color: #ffffff; font-weight: bold; text-decoration: none; padding: 12px 24px;">查看物流</a> </td> </tr> </table> - 留白用
<td height="20"></td>，别用margin或padding（Outlook 会忽略）
物流信息动态插入的关键点
邮件模板最终要被后端（如 Node.js/PHP/Python）注入真实数据，比如运单号、快递公司、预计送达时间。这时候不能依赖 JS（邮件里 JS 全部被禁），所有变量必须由服务端字符串替换完成。
使用场景：你用 nodemailer 发货通知，模板是 dispatch.html，里面留占位符如 <!-- ORDER_ID --> 或 {{tracking_number}}。
实操建议：
- 占位符用全大写 + 明确前缀，比如
<!-- TRACKING_NUMBER -->，避免和服务端变量名冲突 - 快递公司 logo 别用 SVG，用 PNG，且
src必须是绝对 URL（https://cdn.example.com/logo-sf.png），相对路径一律 404 - 时间字段注意时区：后端应输出已转为用户本地时区的字符串，别丢个 UTC 时间让前端解析（没前端）
- 运单号超长时，用
word-break: break-all（仅内联）防止溢出：style="word-break: break-all;"
测试环节最容易被忽略的三件事
发给同事看“能打开就行”？大概率上线后被客户截图投诉“按钮点不了”“地址显示一半”。真实问题往往藏在特定组合里。
实操建议：
- 必须在 Outlook for Windows（不是网页版）里打开测试——它对
<table>渲染最严格 - 用
background-color给每个<td>加临时色块，一眼看出是否塌陷或错位 - 把模板扔进 Putsmail 或 Email on Acid 做跨客户端截图比对，重点看 iOS 邮件、Gmail App、Outlook Android
复杂点在于：同一份 HTML，在 iPhone 邮件里按钮正常，在 Outlook for Mac 里却文字偏右 5px——这种差异只能靠反复微调 padding 和 line-height 硬扛，没有银弹。
