电子邮件客户端对现代 css 支持极差，必须使用表格布局、内联样式和兼容性写法才能确保签名跨平台正常渲染。
电子邮件客户端对现代 css 支持极差，必须使用表格布局、内联样式和兼容性写法才能确保签名跨平台正常渲染。
你遇到的问题非常典型：VS Code 和浏览器能完美渲染你的 Figma 导出签名，但 Outlook、eM Client、iCloud Web 等邮件客户端却显示错乱——这不是你的代码“有问题”，而是电子邮件的渲染引擎根本不是浏览器。绝大多数邮件客户端（尤其是 Outlook 桌面版）基于旧版 Microsoft Word 渲染引擎，不支持 Flexbox、CSS 变量、@import、background-clip: text、fit-content、SVG 或外部字体加载等现代特性。它们甚至对 <style> 标签的支持都极其有限或完全忽略。
✅ 正确做法：回归“表格时代”
为保障兼容性，电子邮件签名必须采用语义化 HTML 表格 + 全内联样式（inline styles） 的结构。这不是过时，而是行业标准实践：
Outlook Add-in
下载
Outlook 侧边栏加载项，将您的 OpenClaw 智能体的全部能力带入 Microsoft Outlook。可针对任意邮件与智能体进行对话，调用您所有的工具……
<!-- ✅ 推荐：兼容所有主流邮件客户端的签名骨架 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 758px; font-family: 'Rubik', Helvetica, Arial, sans-serif;">
<tr>
<td valign="top" style="padding: 15px;">
<!-- 左侧：Logo 图片 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="padding-right: 15px;">
<img src="https://yourdomain.com/images/logo.png" alt="Compucable Logo" width="132" height="132" style="display: block; border: 0;">
</td>
</tr>
</table>
<!-- 右侧：文字信息 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="font-size: 24px; font-weight: bold; color: #2b91d1; background: linear-gradient(180deg, #2b91d1, #29c4a9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2;">
J.D. Van Der Walt
</td>
</tr>
<tr>
<td style="font-size: 13px; font-style: italic; color: #003366; margin-top: 4px;">
Operations Director
</td>
</tr>
<tr>
<td style="padding-top: 12px; font-size: 0; line-height: 0;">
<!-- 联系方式行：图标 + 文字 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding-right: 10px; vertical-align: top;">
<img src="https://yourdomain.com/images/phone-icon.png" alt="Phone" width="10" height="10" style="display: block; border: 0;">
</td>
<td style="vertical-align: top;">
<span style="font-size: 8px; color: #003366;">PTA:</span><br>
<a href="tel:0123429160" style="font-size: 8px; color: #003366; text-decoration: none;">012 342 9160</a><br>
<span style="font-size: 8px; color: #003366;">CPT:</span><br>
<a href="tel:0212073977" style="font-size: 8px; color: #003366; text-decoration: none;">021 207 3977</a>
</td>
</tr>
<tr>
<td style="padding-right: 10px; vertical-align: top;">
<img src="https://yourdomain.com/images/location-icon.png" alt="Location" width="10" height="10" style="display: block; border: 0;">
</td>
<td style="vertical-align: top;">
<a href="https://maps.app.goo.gl/JXRQiR4KMZ8LLnv9A" style="font-size: 8px; color: #003366; text-decoration: none;">
1028 Pretorius Street,<br>
Hatfield, Pretoria, 0002
</a>
</td>
</tr>
<tr>
<td style="padding-right: 10px; vertical-align: top;">
<img src="https://yourdomain.com/images/email-icon.png" alt="Email" width="10" height="10" style="display: block; border: 0;">
</td>
<td style="vertical-align: top;">
<a href="mailto:info@compucable.co.za" style="font-size: 8px; color: #003366; text-decoration: none;">info@compucable.co.za</a>
</td>
</tr>
<tr>
<td style="padding-right: 10px; vertical-align: top;">
<img src="https://yourdomain.com/images/web-icon.png" alt="Website" width="10" height="10" style="display: block; border: 0;">
</td>
<td style="vertical-align: top;">
<a href="https://www.compucable.co.za" style="font-size: 8px; color: #003366; text-decoration: none;">www.compucable.co.za</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>⚠️ 关键注意事项
- 所有 CSS 必须内联：<style> 标签在多数客户端中被忽略（Outlook 完全不支持）。使用工具如 gulp-email-builder 或 Premailer 自动将 CSS 提取并注入 style 属性。
- 禁用 Flexbox / Grid / SVG / @import / var(--color)：这些均不可靠。用 <table> 实现布局，用固定像素或 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 写签名”的执念，拥抱表格与内联，才是专业邮件签名落地的唯一正解。
