电子邮件客户端对现代 css 支持极差，必须使用表格布局、内联样式和兼容性写法才能确保签名跨平台正常渲染。
电子邮件客户端对现代 css 支持极差，必须使用表格布局、内联样式和兼容性写法才能确保签名跨平台正常渲染。
你遇到的问题非常典型：VS Code 和浏览器能完美渲染你的 Figma 导出签名，但 Outlook、eM Client、iCloud Web 等邮件客户端却显示错乱——这不是你的代码“有问题”，而是电子邮件的渲染引擎根本不是浏览器。绝大多数邮件客户端（尤其是 Outlook 桌面版）基于旧版 Microsoft Word 渲染引擎，不支持 Flexbox、CSS 变量、@import、background-clip: text、fit-content、SVG 或外部字体加载等现代特性。它们甚至对
✅ 正确做法：回归“表格时代”
为保障兼容性，电子邮件签名必须采用语义化 HTML 表格 + 全内联样式（inline styles） 的结构。这不是过时，而是行业标准实践：
outlook-mail-reader
下载
使用 MCP chrome-devtools 协议控制本地 Chrome 浏览器查询 Outlook 邮件，支持按日期跳转、筛选、搜索。前提：Chrome 已开启远程调试（127.0.0.1:9222 或 18800），并已配置 OpenClaw chrome-devtools-mcp。
<!-- ✅ 推荐：兼容所有主流邮件客户端的签名骨架 -->
|
⚠️ 关键注意事项
- 所有 CSS 必须内联：
-
禁用 Flexbox / Grid / SVG / @import / var(--color)：这些均不可靠。用
实现布局，用固定像素或 em 单位控制尺寸（推荐 em 更适配缩放）。
- 图片必须托管于 HTTPS 外链：Base64 图片在 Outlook、Apple Mail 中常被屏蔽或崩溃；应上传至服务器（如 https://compucable.co.za/assets/signature/），并确保 src 使用绝对 URL。
- 字体回退要务实：font-family: 'Rubik', Helvetica, Arial, sans-serif; 是安全写法；避免依赖 Google Fonts —— 大部分客户端无法加载外部字体。
- 测试！测试！再测试！ 使用 Email on Acid 或 Postdrop 进行多客户端截图比对，覆盖 Outlook (Win/Mac), Apple Mail, Gmail (Web/App), eM Client, iCloud。
? 小结：设计师友好工作流建议
- 设计阶段：在 Figma 中按 758px 宽度设计（适配 Outlook 最小宽度），避免渐变文字（可导出 PNG 替代）；
- 开发阶段：手写语义化表格 HTML + 内联样式，或用 MJML（语法简洁，自动转兼容 HTML）；
- 构建阶段：集成 Gulp / NPM 脚本自动内联 CSS、压缩 HTML、验证链接；
- 部署阶段：所有资源（图片、图标）上传至 CDN 或自有 HTTPS 域名，禁用路径相对引用。
电子邮件不是网页——它是受限制的、保守的、以兼容性为王的独立生态。放弃“用现代 CSS 写签名”的执念，拥抱表格与内联，才是专业邮件签名落地的唯一正解。
