HTML 邮件模板的正确写法：一次兼容 Gmail / Outlook / QQ Mail 的实践总结

HTML 邮件模板的正确写法

在 Web 项目中，HTML 邮件模板不能按网页的方式来写。
即使在部分客户端（如 QQ Mail）表现正常，也很容易在 Gmail、Outlook 中出现样式错位。

为了保证邮件在主流客户端中的一致性，实际可行的做法只有一套。

核心结论

HTML 邮件模板必须使用：

table 作为布局结构

全部样式写成 inline style

明确指定尺寸（width /padding/font-size）

这是目前兼容 Gmail、Outlook、Apple Mail、QQ Mail 的唯一稳定方案。

推荐写法（实践规则）

1. 使用 table 进行布局

Copy



内容区域




避免使用 div + flex / grid 进行排版。

2. 所有样式使用 inline style

Copy

正文内容


不要依赖：

标签

class / selector

外部 CSS

3. 图片尺寸必须显式指定

Copy


避免图片在部分客户端被自动放大或撑开布局。

4. 按 “最差客户端” 设计

即使某些客户端支持现代 CSS，也应以 Gmail / Outlook 的渲染能力作为最低标准。

结语

HTML 邮件并不是网页渲染环境。
使用 table + inline style 并不是过时，而是目前唯一可靠的工程实践。

当邮件需要稳定触达用户时，兼容性优先于代码 “优雅性”。