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

谈到HTML邮件的兼容性,与其说“有要求”,不如说“完全由兼容性定义”——你写的每一行代码,都得先过Outlook、Gmail和Apple Mail这三座大山。否则,发出去的邮件很可能变成乱码、错位、图片消失,甚至直接显示空白页。
长期稳定更新的攒劲资源: >>>点此立即查看<<<
为什么table布局不是可选,而是唯一可靠布局方式
原因很简单:这三大客户端的渲染引擎各有各的“脾气”。Outlook for Windows用的是Word的渲染引擎,它根本不认识display: flex、display: grid这些现代布局,连float和max-width都可能被直接无视。Gmail更“狠”,它会剥离所有标签,并重写DOM结构。至于Apple Mail,虽然支持部分现代CSS,但一旦混入为Outlook写的兼容逻辑,就很容易被自动包裹、换行,甚至丢失内边距。
所以,实战中必须牢记以下几点:
- 外层容器用属性,别用样式:写
,而不是style="width: 600px;"。Outlook更认width这个属性。
- 结构层级必须严格:所有布局都遵循
→ → 的层级,彻底禁用作为布局容器,哪怕只是包一行文字。
- 多栏布局用表格单元格:需要实现“两栏”效果?直接用
并列,别去尝试display: inline-block。
- 垂直居中用传统属性:想让文字垂直居中?用
,vertical-align: middle在这里靠不住。
| | |
内联样式为什么必须手写,不能靠工具自动加
市面上有些工具(比如Roadie)确实能帮你把