Outlook转发时邮件签名布局错乱问题求助

核心修复思路：适配Outlook Word渲染引擎的特性 #

Outlook（Windows桌面版）依赖Word的HTML渲染引擎，对现代CSS支持极差，转发时还会重写部分容器样式，这是布局错乱的根源。结合你已有的适配基础，可按以下步骤针对性修复：

1. 彻底重构为嵌套Table布局，废弃浮动/弹性布局
   删掉Figma生成的所有div、flex、float相关代码，所有布局用嵌套<table>实现，所有宽度、高度强制设为绝对px值。给每个table添加专属样式，避免Outlook自动插入间距：

   <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     <tr>
       <td width="120" style="padding: 0;">
         <!-- 头像等固定宽度区域 -->
       </td>
       <td width="480" style="padding: 0;">
         <!-- 姓名、联系方式等内容区域 -->
       </td>
     </tr>
   </table>
   

2. 锁定所有样式为内联，避免转发时样式丢失
   Outlook转发时会丢弃<style>标签中的类选择器样式，必须把所有字体、颜色、行高转为内联样式，同时添加mso-line-height-rule: exactly强制行高生效：

   <td style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; line-height: 18px; color: #333; mso-line-height-rule: exactly;">
     张三 | 产品经理
   </td>
   

3. 修复深色模式在转发时的冲突
   Outlook的深色模式会自动反转颜色，转发时可能覆盖你自定义的深色样式。给所有颜色属性添加mso-color-alt备份，同时用条件注释针对Outlook单独锁定样式：

   <!--[if mso]>
   <style>
     .dark-mode-bg { background: #1a1a1a !important; }
   </style>
   <![endif]-->
   <td style="background: #fff; mso-color-alt: #1a1a1a;">联系方式</td>
   

4. 清理Figma生成的冗余代码
   Figma插件生成的代码通常包含大量冗余标签（如多余的<span>、<div>）和不兼容属性（如position: relative、box-shadow），全部删除，只保留table/tr/td结构，减少Outlook解析出错的概率。

5. 处理转发时的分隔线挤压问题
   Outlook转发时会在签名前插入默认分隔线，可能挤压签名布局。在签名根table顶部添加空行并强制高度，避免布局被挤压：

   <!--[if mso]>
   <tr><td height="10" style="font-size: 1px; line-height: 1px;">&nbsp;</td></tr>
   <![endif]-->
   

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