HTML邮件对兼容问题有要求吗_兼容问题中HTML邮件用法【新手必读】-html教程-PHP中文网

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

html邮件对兼容问题有要求吗_兼容问题中html邮件用法【新手必读】

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

为什么

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

Outlook for Windows 用的是 Word 渲染引擎，它根本不认识 display: flex、display: grid、float，连 max-width 都可能被无视；Gmail 会剥离所有 <style></style> 标签，并重写 DOM 结构；Apple Mail 虽支持部分现代 CSS，但一旦混入 Outlook 兼容逻辑，<div> 就容易被自动包裹、换行、丢失 padding。 <p>实操建议：</p> <ul><li>外层容器用 <code><table width="600" align="center">，别写 <code>style="width: 600px;" —— Outlook 更认 width 属性而非 CSS

所有结构层级必须是

<table> → <code><tr> → <code><td>，禁用 <code><div> 做布局容器（哪怕只包一行文字）
<li>需要“两栏”？用 <code><td width="300"> + <code><td width="300">，别试图用 <code>display: inline-block

垂直居中文字？用 <td valign="middle">，而不是 <code>vertical-align: middle

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

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

实操建议：

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

字体必须用 <font face="Arial, sans-serif" size="2"> 双兜底，<code>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;" 发过去就没了。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

实操建议：

需要隐藏内容（比如“仅桌面显示”区块），必须用 hybrid 写法：<div style="display: none; max-height: 0; overflow: hidden; mso-hide: all;"> <li> <code>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> 和 <code><font></font> 不是过时，是目前唯一能跨客户端落地的语法。