发货通知邮件必须用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> 布局和内联 <code>style；Gmail 会剥离 和外部样式；iOS 邮件虽支持部分 Flex，但一旦嵌套或加动画就错位。你写的 display: flex 很可能变成一坨堆叠文字。
实操建议：
- 所有样式必须写成内联
style="..."，连<style></style>标签都别加 - 用
<table> 控制整体结构，<code>cellpadding/cellspacing设为 0 - 字体统一用安全栈：
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif - 图片必须带
alt和明确的width/height，否则 Outlook 会撑开容器 - 避免
float、position、@media（响应式要靠条件注释或双层表格） - 每个
<td> 加 <code>valign="top"，防止文字垂直居中失效 - 按钮不用
@#@#@#@#@#@#@#@#@#@0 或 @#@#@#@#@#@#@#@#@#@1 做跨客户端截图比对，重点看 iOS 邮件、Gmail App、Outlook Android
<table> 布局怎么写才不翻车<p>不是套个 <code><table> 就行——得用“单列嵌套表”结构：外层 <code><table width="600"> 固定宽度（适配多数客户端），里面每块内容（标题、物流信息、按钮）各自用一个 <code><tr><td> 包住，再需要分栏时才在 <code><td> 里套新 <code><table>。<p>常见错误现象：在 QQ 邮箱里内容左偏、按钮变超宽、文字换行错乱。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>实操建议：</p>
<ul><li>主容器 <code><table> 必须设 <code>width="600"（不要用 max-width）
复杂点在于：同一份 HTML，在 iPhone 邮件里按钮正常，在 Outlook for Mac 里却文字偏右 5px——这种差异只能靠反复微调 padding 和 line-height 硬扛，没有银弹。
| 查看物流 |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
