Microsoft Outlook发送邮件时HTML签名出现多余间距问题

问题根源 #

Outlook在发送邮件时会自动格式化HTML代码，把代码里的换行缩进转成空格，再加上<br />标签和float元素的组合渲染特性，就会出现多余空白。另外，Outlook对行高、字体大小的样式支持也有特殊性，普通设置可能被忽略。

修复方案 #

1. 放弃用<br />和float组合控制换行，改用表格行<tr>拆分区块——Outlook对表格布局的渲染最稳定，不会出现意外间隙。
2. 给所有容器元素强制设置font-size:0; line-height:0;，同时确保元素样式里的内外边距都清零。
3. 移除代码里的多余换行和缩进，防止Outlook把这些解析成空格。
4. 把float:left替换为display:inline-block，配合父元素的font-size:0，彻底消除行内元素间的空白。

修改后的完整代码 #

<table style="table-layout:fixed;border-spacing:0;border-collapse:collapse;margin:0;padding:0;border:0;vertical-align:top;background:white;" cellspacing="0" cellpadding="0" role="presentation">
  <tbody style="margin:0;padding:0;border:0;">
    <tr style="margin:0;padding:0;border:0;font-size:0;line-height:0;">
      <td style="margin:0;padding:0;border:0;vertical-align:top;font-size:0;line-height:0;">
        <a href="https://www.timbertight.com/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-1.png" alt="" style="padding:0;margin:0;"></a>
      </td>
      <td style="margin:0;padding:0;border:0;vertical-align:top;font-size:0;line-height:0;">
        <table style="border-spacing:0;border-collapse:collapse;margin:0;padding:0;border:0;font-size:0;line-height:0;" cellspacing="0" cellpadding="0" role="presentation">
          <tbody>
            <tr style="margin:0;padding:0;border:0;">
              <td style="margin:0;padding:0;border:0;">
                <img src="https://puddle.agency/email/timber-tight/Timbertight-2.png" alt="" style="padding:0;margin:0;">
              </td>
            </tr>
            <tr style="margin:0;padding:0;border:0;">
              <td style="margin:0;padding:0;border:0;font-size:0;line-height:0;">
                <a href="https://www.linkedin.com/company/timbertight/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-3.png" alt="" style="padding:0;margin:0;display:inline-block;"></a>
                <a href="https://www.facebook.com/timbertight/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-4.png" alt="" style="padding:0;margin:0;display:inline-block;"></a>
                <a href="https://twitter.com/TimberTight" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-5.png" alt="" style="padding:0;margin:0;display:inline-block;"></a>
                <a href="https://www.instagram.com/timbertight/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-6.png" alt="" style="padding:0;margin:0;display:inline-block;"></a>
              </td>
            </tr>
            <tr style="margin:0;padding:0;border:0;">
              <td style="margin:0;padding:0;border:0;">
                <img src="https://puddle.agency/email/timber-tight/Timbertight-7.png" alt="" style="padding:0;margin:0;">
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

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