HTML邮件签名在Outlook 365客户端表格内容对齐异常问题求助

问题原因 #

Outlook 365 对 HTML/CSS 的支持度远低于普通浏览器，对相对宽度、自适应尺寸、嵌套表格的渲染有很多专属规则，你的对齐问题来自以下几个错误写法：

• 头部黑色区域的两个并列单元格没有明确设置宽度和垂直对齐属性，Outlook 不会按你写的90%/10%比例自动适配，默认对齐规则不一致直接导致错位
• Logo 图片使用了width="auto" height="auto"的自适应设置，Outlook 不识别该规则，会自动按原始尺寸撑开右侧单元格，挤压左侧文字区域
• 头部嵌套层级冗余，多余的表格嵌套触发了 Outlook 的表格渲染 bug
• 部分属性拼写错误（p 标签的stlye应为style），导致边距设置不生效

修复方案 #

1. 调整头部表格结构与属性 #

删除头部冗余的嵌套表格，直接在黑色背景的两个并列单元格内放内容，同时明确设置单元格宽度和对齐属性：

<tr>
  <!-- 左侧文字区域 -->
  <td bgcolor="#000000" width="80%" valign="middle" style="padding:10px;">
    <span style="font-family:Arial, sans-serif; font-size:16px; line-height:16px; font-weight:700; color:#fff; text-transform:uppercase;">Libby Stonehawk</span>
    <br>
    <span style="font-family:Arial, sans-serif; font-size:14px; line-height:16px; font-weight:400; color:#d6e3e1; text-transform:uppercase; padding-top:5px; display:block;">Website Manager</span>
  </td>
  <!-- 右侧Logo区域 -->
  <td bgcolor="#000000" width="20%" valign="middle" align="right" style="padding:10px;">
    <!-- 替换为你logo实际的固定宽高，不要用auto -->
    <img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/kallumslogotrans-white-2.png" width="112" height="40" alt="" style="display:block;">
  </td>
</tr>

2. 其他通用适配调整 #

• 删掉谷歌字体的@import规则，Outlook 完全不支持外部字体，直接用 Arial 等系统默认字体即可
• 所有图片标签都加上style="display:block"，避免 Outlook 自动添加多余间距
• 修正所有拼写错误的属性名，确保样式生效

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