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 会剥离所有
复制
标签,并重写 DOM 结构;Apple Mail 虽支持部分现代 CSS,但一旦混入 Outlook 兼容逻辑,
复制
就容易被自动包裹、换行、丢失 padding。实操建议:使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更下载外层容器用复制 ,别写复制 style="width: 600px;"
—— Outlook 更认复制 width
属性而非 CSS所有结构层级必须是复制 →复制 →复制 ,禁用复制
做布局容器(哪怕只包一行文字)需要“两栏”?用复制 +复制 ,别试图用复制 display: inline-block
垂直居中文字?用复制 ,而不是复制 vertical-align: middle
内联样式为什么必须手写,不能靠工具自动加工具如 Roadie 确实能帮你把复制
转成内联,但它无法判断哪些 CSS 属性在 Gmail App 里会被整条清掉(比如带复制 !important
的声明),也无法修复 Outlook 对复制 padding
的忽略、或 Apple Mail 对复制 line-height
的单位误读。立即学习“前端免费学习笔记(深入)”;实操建议:所有样式必须写在复制
里,且只用 Gmail/Outlook/Apple Mail 三方都支持的属性:如复制 color
、复制 font-size
、复制 text-align
、复制 width
、复制 height
避免复制 margin
—— Gmail App 不渲染,改用双兜底,复制 font-family
在 Outlook 2007–2019 中经常失效复制 background-image
全面禁用 —— Outlook 不渲染,Gmail 会 block,改用复制 bgcolor="#f5f5f5"
或拼接复制
Gmail App 里 display:none 为啥不生效Gmail(尤其是 iOS/Android App)会主动剥离复制 style
属性中的复制 display
、复制 visibility
、复制 opacity
声明,它只保留极简子集。你写的复制 style="display: none;"
发过去就没了。实操建议:需要隐藏内容(比如“仅桌面显示”区块),必须用 hybrid 写法:复制
复制 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 留白。实操建议:所有复制
必须带复制 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
看源码比预览更重要;