如何消除Outlook中HTML邮件表格间的多余空白间距

问题根源 #

Outlook 2007及之后版本使用Word内核渲染HTML邮件，不遵循标准Web渲染规则，即使代码在浏览器中显示正常，也会因为默认边距、行高计算、元素对齐逻辑的差异出现多余白线、表格空隙。

修复步骤 #

• 全量补全表格重置属性
  给所有<table>标签增加border-collapse: collapse;样式，所有<td>标签增加border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;样式，覆盖Outlook默认的表格边距规则，哪怕已经设置了border="0" cellpadding="0" cellspacing="0"也必须加这几个属性。
• 清除图片容器的默认行高
  包裹图片的<td>标签必须设置line-height: 0; font-size: 0;，原代码中logo外层容器设置了line-height:15px，Outlook会把这部分行高算成额外的单元格高度，露出灰色背景形成白线。
• 移除冗余固定高度设置
  删除第一块外层表格、对应tr、td上硬写的height:74px属性，Outlook计算高度时会把内边距、内容高度重复叠加，硬写高度很容易撑出多余空隙，让单元格高度随内容自适应即可。
• 补全图片兼容属性
  所有<img>标签除了已有的display:block之外，补充vertical-align: bottom;属性，同时添加原生属性hspace="0" vspace="0"，彻底消除图片基线对齐带来的底部间隙。
• 消除标签间空白字符
  相邻的两个<table>标签要紧挨着书写，不要在标签之间留换行、缩进空格，Outlook会把代码里的空白字符渲染成空行，造成表格之间的额外空隙。

修复后核心代码示例 #

body {
  background-color: grey;
}
table {
  border-collapse: collapse;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}
td {
  border-collapse: collapse;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}

<table class="row row-2" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td>
        <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff; color: #000; width: 650px;" width="650">
          <tbody>
            <tr>
              <td class="column column-1" width="100%" style="font-weight: 400; text-align: left; vertical-align: top; padding-top: 20px; padding-bottom: 15px; border: 0;">
                <table class="image_block" width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td style="width: 100%; padding-right: 0; padding-left: 0; line-height: 0; font-size: 0;">
                        <div align="center" style="line-height: 0;">
                          <a href="http://www.media-nexus.com/" style="outline: 0;" tabindex="-1"><img src="https://www.media-nexus.com/images/site/logos/media-nexus-logo-320x55.png" style="display: block; height: auto; border: 0; width: 200px; max-width: 100%; vertical-align: bottom;" width="200" hspace="0" vspace="0" alt="Logo" title="Logo" /></a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table><table class="row row-3" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td style="line-height: 0; font-size: 0;">
        <table class="image_block" width="100%" border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td style="width: 100%; padding-right: 0; padding-left: 0; line-height: 0; font-size: 0;">
                <div align="center" style="line-height:0;"><img src="https://www.media-nexus.com/images/site/articles/headers/conference_room4.jpg" style="display: block; height: auto; border: 0; width: 650px; max-width: 100%; vertical-align: bottom;" width="650" hspace="0" vspace="0" alt="Header" title="Header" /></div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

如果改完后仍存在极细的1px白线，可以给对应位置的td设置和相邻内容一致的背景色，就算Outlook出现1px以内的渲染偏差，也不会露出背景的灰色线条。

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