HTML邮件天生绑定兼容问题，必须用table布局、内联样式适配Outlook，禁用display:none防Gmail降级，图片需HTTPS绝对路径及alt属性，链接统一用https并避免target="_blank"。
HTML邮件和兼容问题不是“冲突”，而是“天生绑定”——所有HTML邮件都必须面对兼容问题，不存在绕开它的方案，只有权衡取舍的策略。
为什么Outlook会把<div>渲染成空白
Outlook桌面版（2007–2019）使用Microsoft Word引擎解析HTML，不支持<div>、<section>、<flex>、float、position等现代CSS布局特性。它只认<table>、<td>、内联style和极有限的CSS属性（如color、font-size、padding）。
- 别用
class或外部CSS：Outlook直接忽略<style>标签和class="..." - 用
<table>套<td>做布局，宽度写死（如width="600"），避免百分比 -
padding在<td>上有效，在<div>上无效；margin基本全失效 - 测试时务必打开Outlook 2016/2019本地客户端，网页版Outlook（OWA）和移动端表现完全不同
display: none在Gmail里突然显示了怎么办
Gmail会主动剥离<style>块，并过滤掉含display: none、visibility: hidden等隐藏样式的元素——但它不是简单删掉，而是可能把整段HTML当“可疑内容”降级处理，甚至导致后续样式错乱。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 绝对不要在
<style>里写display: none；如需条件显示，改用<span style="display:none;font-size:0;line-height:0;">并确保该<span>是独立<td>子元素 - Gmail对
!important极度敏感，尽量不用；它会重写你的内联样式优先级 - 想兼容Gmail又保持结构清晰？用
<div>仅作语义分组，所有可见样式必须落在<td>或<span>上，且用重复声明 - 用
data-*属性做逻辑标记可以，但Gmail不读它们——别指望靠JS或自定义属性控制显隐
图片不显示、链接打不开的常见配置漏项
不是代码写错了，而是邮件客户端强制拦截未声明的资源加载行为。Gmail、Apple Mail、Outlook都会默认屏蔽远程图片，且部分客户端（如iOS Mail）会自动“修正”href中的URL协议。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img>必须带alt属性（否则Gmail显示红叉）、width/height（否则缩放异常），且src用HTTPS绝对路径 -
<a href="http://...">要写成<a href="https://...">；HTTP链接在iOS Mail里会被静默转为https://后404 - 避免
target="_blank"：Outlook忽略，Gmail可能禁用；如需新窗口，用target="_new"（非标准但实测更稳） - 邮件中禁止使用
<base href="...">：几乎所有客户端都不支持，反而干扰链接解析
真正难的不是写一个能跑的HTML邮件，而是让同一份代码在Outlook 2013、Gmail App、Apple Mail、Android Gmail、OWA这五种环境里都“看起来差不多”。没有银弹，只有反复测试+渐进降级——比如先保证文字可读、链接可达，再谈间距、圆角、动画。漏掉任意一个客户端的真实渲染链路，上线后就是用户收不到关键按钮。
