html邮件必须用表格布局和内联样式，因outlook（word引擎）、gmail、apple mail等不支持flex/grid/@media，会剥离外部css和style标签，导致布局错乱、样式失效。
HTML 邮件不能用现代前端那一套 —— Flex、Grid、@media 查询在多数邮箱客户端里直接失效，连 margin 和 padding 都可能被忽略。想让活动邀请邮件在 Outlook、Apple Mail、Gmail 里长得差不多，得倒退十年用表格布局 + 内联样式。
为什么不能直接用 CSS 外链或 <style></style> 标签
Outlook（尤其是 Windows 版）会剥离 和外部样式表；Gmail 会过滤大部分 <style></style> 块里的规则；Apple Mail 虽然支持部分 CSS，但不保证一致性。结果就是：你在浏览器里预览好好的邮件，在收件人手机上变成文字堆叠、按钮消失、图片错位。
- 所有样式必须写成
style="..."内联形式 - 布局靠
<table> 套嵌，单列为主，避免复杂嵌套 <li>字体优先用系统安全字体栈：<code>font-family: Arial, sans-serif;，别指望Inter或Helvetica Neue被识别 - 图片必须带
alt属性，且设固定width/height，否则 Outlook 可能撑开容器 - 外层容器用
<table width="600" align="center">，固定宽度比百分比更可靠 <li>每行一个 <code><tr>，内容区用 <code><td valign="top">，避免垂直对齐异常 <li>按钮别用 <code><button></button>或@#@#@#@#@#@#@#@#@#@0 或 @#@#@#@#@#@#@#@#@#@1 测试主流客户端渲染效果，重点关注 Outlook for Windows、iOS Mail、Gmail App - 把所有链接补全协议（
https://开头），Gmail 会拦截无协议的//example.com - 文本内容不能全靠图片，必须有等价纯文本段落（放在
<div style="display:none;"> 里不行，要用 <code><span style="display:none;"></span>或干脆另建<!--[if !mso]-->...<!--[endif]-->条件注释包裹）真正麻烦的不是写 HTML，而是验证它在二十种环境里是否都显示正常。哪怕只漏测一个 Outlook 2013，就可能让关键按钮变成不可点击的纯文本。别信“看起来差不多”，得点开每一个截图确认对齐、颜色、间距、链接跳转——这才是活动邮件能落地的前提。
立即报名
