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,就可能让关键按钮变成不可点击的纯文本。别信“看起来差不多”,得点开每一个截图确认对齐、颜色、间距、链接跳转——这才是活动邮件能落地的前提。
立即报名











