将signature.html部署至Windows默认邮件应用（Microsoft 365）的间距问题

原问题：将HTML签名部署到Windows默认Microsoft 365邮件应用，发送前显示正常，但保存发送后文字间距异常变大。

问题根源 #

1. 代码结构错误：<tr>直接嵌套在<div>中，脱离了<table>容器，邮件客户端会自动补全无效结构，导致额外间距
2. 多余换行标签：电话部分的<br>被客户端过度渲染，放大了行间距
3. 缺少邮件客户端兼容样式：Microsoft Outlook系列需要特定样式控制间距，原代码没有统一的边距、行高设置

修正后的完整代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Email Signature</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<style type="text/css">
    body, table, td, span, a {
        margin: 0;
        padding: 0;
        line-height: 1.2;
        font-family: Arial, sans-serif;
        mso-line-height-rule: exactly;
    }
    hr {
        border: none;
        border-top: 5px solid #000;
        width: 380px;
        margin: 8px 0;
    }
</style>
</HEAD>
<BODY style="margin:0; padding:0;">
<table style="WIDTH: 400px; border-collapse: collapse; border:0;" cellspacing="0" cellpadding="0" align="right">
  <!-- 姓名行 -->
  <tr>
    <td style="font-size: 10pt; width: 140px; font-weight: bold; valign:top; direction:ltr;">
      <a href="mailto:mail.com" style="text-decoration:none; color:black;">name-name</a>
    </td>
    <td style="text-align:center; font-size: 10pt; width: 120px; font-weight: bold; valign:top;"></td>
    <td style="font-size: 11pt; width: 140px; font-weight: bold; valign:top; direction:rtl;">
      <a href="mailto:mail.com" style="text-decoration:none; color:black;">name-name</a>
    </td>
  </tr>
  <!-- 职位行 -->
  <tr>
    <td style="font-size: 9.5pt; width: 140px; valign:top; direction:ltr;">work</td>
    <td style="text-align:center; font-size: 9.5pt; width: 120px; valign:top; direction:rtl;"></td>
    <td style="font-size: 9.5pt; width: 140px; valign:top; direction:rtl;">work</td>
  </tr>
  <!-- 电话行 -->
  <tr>
    <td></td>
    <td style="text-align:center; width: 120px; font-size:10pt;">
      <a href="tel:phoneNum" style="text-decoration:none; color:windowtext;">phoneNum</a><br>
      <a href="tel:telNum" style="text-decoration:none; color:windowtext;">telNum</a>
    </td>
    <td></td>
  </tr>
  <!-- 分隔线 -->
  <tr>
    <td colspan="3">
      <hr>
    </td>
  </tr>
  <!-- 横幅图片 -->
  <tr>
    <td colspan="3" style="height:60px; text-align:center;">
      <a href="http://www.website.com/he" target="_blank" rel="noopener">
        <img border="0" alt="Banner" width="331" style="max-width:331px; height:auto; border:0;" src="https://online/logo/logo.jpg">
      </a>
    </td>
  </tr>
</table>
</BODY>
</HTML>

关键修改说明 #

• 统一表格结构：所有行都放在同一个<table>内，避免客户端解析错误
• 全局样式重置：设置margin:0; padding:0; line-height:1.2;，添加mso-line-height-rule: exactly;确保Outlook行高精准
• 移除多余<br>：电话部分只保留必要的换行，用CSS行高控制间距
• 修正语法错误：修复原代码中未闭合的<a>标签、style属性引号问题
• 优化分隔线：用CSS重构<hr>，避免客户端渲染异常

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