outlook桌面版2007–2019用word引擎，不支持div、css布局，仅兼容table+内联样式；gmail app剥离display:none等样式，需用font-size:0模拟隐藏；图片须https绝对路径且设宽高；邮件必须真机多客户端实测。
为什么 Outlook 会把 <div> 渲染成空白？
<p>Outlook（尤其是桌面版 2007–2019）用的是 Microsoft Word 渲染引擎，不支持标准 CSS 布局，<code><div>、<code>float、flex、position 几乎全部失效。它只认 <table> 布局和内联样式。
<p>实操建议：</p>
<ul><li>所有结构用嵌套 <code><table> 实现，宽度设为 <code>100% 或固定像素值（如 600px），避免百分比 + max-width
class 和外部 CSS，所有样式必须写在 style 属性里，且优先用 width、height、padding、border 等“老派”属性<font></font> 标签兜底，例如：<font face="Arial, sans-serif" size="2">文字</font>，不要依赖 font-family CSSbackground-image —— Outlook 不渲染；改用单色背景 + <img> 拼接或纯色 bgcolor
display: none 在 Gmail App 里为什么没隐藏？
Gmail（尤其是 iOS/Android App）会主动剥离 style 标签和部分内联 CSS，包括 display、visibility、opacity 等声明。它只保留极简的内联样式子集。
实操建议：
- 别指望
display: none隐藏内容 —— 改用<span style="font-size: 0; line-height: 0; color: #ffffff;"> </span>模拟“视觉隐藏” - 需要条件显示的内容（如“移动端隐藏 / 桌面端隐藏”），用媒体查询 +
max-device-width是无效的；应改用 Gmail 兼容的“hybrid”写法：用<div> 包裹 + <code>display: none+ 同时加height: 0; overflow: hidden;提高命中率 - 测试时务必真机打开 Gmail App —— Web 版 Gmail 用的是 Chrome 渲染，表现完全不同
- 所有
<img src>必须是完整 HTTPS 地址，例如：https://cdn.example.com/email/logo.png，不能是/images/logo.png或http://... - 加上
alt属性并设height/width（防止 Gmail 自动缩放变形），同时加style="display: block;"避免下方多出空白行 - 避免图片文件名含空格或中文；服务器需开启 CORS（部分客户端如 Apple Mail 要求）
- 如果用 CDN，确认其支持 HTTP/1.1 且响应头不含
X-Frame-Options: DENY或Content-Security-Policy限制 - 别用浏览器直接打开测试；必须通过真实 SMTP 发送（哪怕发给自己），用多个收件箱（Gmail、Outlook.com、Apple Mail、iOS Mail App、Android Gmail App）逐一查收
- 用 Email on Acid 或 Litmus 截图比对，重点关注表格错位、字体回退、按钮变文本、CTA 链接失效等高频问题
- 发送前检查原始邮件源码（在 Gmail 点右上角 ⋯ → “显示原始邮件”），确认没有被插入额外
<style></style>或自动添加target="_blank"等干扰项
图片不显示、被拦截，是路径还是协议问题？
HTML 邮件中图片加载失败，80% 是因为用了相对路径、本地路径或 http:// 协议（Gmail 会强制 block）。邮件客户端不会执行 JS，也不走本地缓存，一切依赖绝对 URL。
Claude风格HTML汇报文件
下载
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
实操建议：
如何验证一封 HTML 邮件是否真能发出去？
本地预览 .html 文件 ≠ 邮件实际效果。每个客户端都运行在隔离沙箱里，会重写、过滤、删减你的代码 —— 甚至同一品牌不同版本行为也不同（比如 Outlook for Mac vs Outlook Windows）。
实操建议：
最麻烦的不是写错，而是某一行看似无害的 CSS（比如 box-sizing: border-box）在某个 Outlook 版本里导致整列塌陷 —— 这类问题只能靠真实环境反复试错，没有银弹。
