HTML邮件对兼容问题有要求吗_兼容问题中HTML邮件用法(新手必读)

HTML邮件兼容性完全由Outlook、Gmail、Apple Mail三方引擎决定：必须用table布局、内联样式、width/height属性、font标签、HTTPS绝对图片路径，并采用hybrid隐藏方案，禁用CSS3、媒体查询与background-image。

HTML邮件对兼容问题不是“有要求”，而是“完全由兼容性定义”——你写的每行代码，都得先过 Outlook、Gmail、Apple Mail 这三关，否则发出去就是乱码、错位、图片消失或空白页。

为什么

不是可选，而是唯一可靠布局方式

Outlook for Windows 用的是 Word 渲染引擎，它根本不认识 display: flex、display: grid、float，连 max-width 都可能被无视；Gmail 会剥离所有 <style> 标签，并重写 DOM 结构；Apple Mail 虽支持部分现代 CSS，但一旦混入 Outlook 兼容逻辑，<div> 就容易被自动包裹、换行、丢失 padding。

实操建议：

• 外层容器用 <table width="600" align="center">，别写 style="width: 600px;" —— Outlook 更认 width 属性而非 CSS
• 所有结构层级必须是 <table> → <tr> → <td>，禁用 <div> 做布局容器（哪怕只包一行文字）
• 需要“两栏”？用 <td width="300"> + <td width="300">，别试图用 display: inline-block
• 垂直居中文字？用 <td valign="middle">，而不是 vertical-align: middle

内联样式为什么必须手写，不能靠工具自动加

工具如 Roadie 确实能帮你把 <style> 转成内联，但它无法判断哪些 CSS 属性在 Gmail App 里会被整条清掉（比如带 !important 的声明），也无法修复 Outlook 对 padding 的忽略、或 Apple Mail 对 line-height 的单位误读。

立即学习“前端免费学习笔记（深入）”；

实操建议：

• 所有样式必须写在 里，且只用 Gmail/Outlook/Apple Mail 三方都支持的属性：如 color、font-size、text-align、width、height
• 避免 margin —— Gmail App 不渲染，改用

  <table><tr><td height="20"></td></tr></table></li><li>字体必须用 <code><font face="Arial, sans-serif" size="2">

  双兜底，font-family 在 Outlook 2007–2019 中经常失效
• background-image 全面禁用 —— Outlook 不渲染，Gmail 会 block，改用 bgcolor="#f5f5f5" 或拼接 <img>

Gmail App 里 display:none 为啥不生效

Gmail（尤其是 iOS/Android App）会主动剥离 style 属性中的 display、visibility、opacity 声明，它只保留极简子集。你写的 style="display: none;" 发过去就没了。

实操建议：

• 需要隐藏内容（比如“仅桌面显示”区块），必须用 hybrid 写法：<div style="display: none; max-height: 0; overflow: hidden; mso-hide: all;">
• mso-hide: all 是 Outlook 专用，max-height: 0 + overflow: hidden 是 Gmail App 保底，两者缺一不可
• 别信媒体查询 —— @media (max-device-width: 480px) 在 Gmail App 和 Outlook for Windows 中基本无效
• 测试时必须真机打开 Gmail App，Web 版 Gmail 渲染结果毫无参考价值

图片不显示，90% 是路径和协议问题

邮件客户端不会走本地缓存，也不执行 JS，一切依赖绝对 URL。相对路径、http://、本地 file:// 全部被拦截 —— Gmail 直接 block，Outlook 显示红叉，Apple Mail 留白。

实操建议：

• 所有 <img> 必须带 src（HTTPS 绝对地址）、alt、width、height 四个属性
• 禁止 style="width: 100%;" —— Outlook 会忽略，导致图片拉伸；用 width="200" height="100" 属性控制
• 加 border="0" style="display: block;" 消除图片下方默认间隙
• 图片服务器必须支持 CORS？不需要 —— 邮件客户端不校验 CORS，但必须 HTTPS 可直连、响应头不含 X-Frame-Options: deny

真正卡住人的从来不是“怎么写”，而是“哪一行在哪个客户端里会崩”。同一份 HTML，在 Outlook for Windows 里结构完好，在 Gmail App 里却多出两行空白，在 iOS Mail 里字体突然变小 —— 这些都不是 bug，是常态。测试不能省，也不能只测 Web 版；View original 看源码比预览更重要；<table> 和 <font> 不是过时，是目前唯一能跨客户端落地的语法。