HTML邮件兼容性完全由Outlook、Gmail、Apple Mail三方引擎决定:必须用table布局、内联样式、width/height属性、font标签、HTTPS绝对图片路径,并采用hybrid隐藏方案,禁用CSS3、媒体查询与background-image。
HTML邮件对兼容问题不是“有要求”,而是“完全由兼容性定义”——你写的每行代码,都得先过 Outlook、Gmail、Apple Mail 这三关,否则发出去就是乱码、错位、图片消失或空白页。
为什么
不是可选,而是唯一可靠布局方式Outlook for Windows 用的是 Word 渲染引擎,它根本不认识、、,连都可能被无视;Gmail 会剥离所有标签,并重写 DOM 结构;Apple Mail 虽支持部分现代 CSS,但一旦混入 Outlook 兼容逻辑,
display: flexdisplay: gridfloatmax-width就容易被自动包裹、换行、丢失 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看源码比预览更重要;和不是过时,是目前唯一能跨客户端落地的语法。
相关文章
