邮件签名在邮件客户端显示异常，寻求HTML适配解决方案

邮件客户端（尤其是Outlook、eM Client这类桌面端）对现代HTML/CSS的支持非常有限，Figma生成的flex自动布局代码在浏览器里正常，但到邮件客户端必然失效。必须用table布局+全内联样式才能兼容，以下是具体实现方案：

核心规则 #

• 所有布局用<table>实现，复杂排版可嵌套table
• 所有样式必须写在元素的style属性里（内联样式），禁止用<style>标签或外部样式表
• 图片必须明确设置width/height，并添加display:block避免底部间隙

具体实现步骤 #

1. 基础Table框架 #

用table构建整体结构，重置默认间距：

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-family: Arial, sans-serif; color: #333;">
  <tr>
    <!-- 左侧图片列 -->
    <td width="60" valign="top" style="padding-right: 15px;">
      <!-- 插入图片 -->
      <img src="你的图片Base64编码或绝对URL" width="60" height="60" alt="个人头像" style="display:block; border:0;" />
    </td>
    <!-- 右侧文字列 -->
    <td valign="top">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="font-size: 16px; font-weight: bold; margin:0; padding:0;">你的名字</td>
        </tr>
        <tr>
          <td style="font-size: 14px; color: #666; padding-top: 4px;">职位</td>
        </tr>
        <tr>
          <td style="font-size: 14px; padding-top: 8px;">电话：1234567890</td>
        </tr>
        <tr>
          <td style="font-size: 14px; padding-top: 4px;">邮箱：your@email.com</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

2. 图片处理注意事项 #

• 如果用Base64，确保编码正确，文件大小控制在100KB以内（部分客户端会截断大Base64内容）
• 优先用绝对URL的图片（比如托管在自己服务器），比Base64兼容性更好、体积更小
• 所有img标签必须加border:0，避免Outlook自动给图片加边框

3. 兼容性细节 #

• Outlook Windows版只识别px单位，不要用em或rem
• 复杂视觉效果（阴影、圆角）不要用CSS实现，直接用图片替代
• 测试时直接复制代码到邮件客户端的签名设置里，不要通过网页复制（会丢失内联样式）

替换现有代码 #

把Figma生成的flex布局全部换成上述table结构，所有样式内联，即可解决eM Client、Outlook、iCloud网页端的显示异常问题。

内容的提问来源于stack exchange，提问作者Riaan Greeff