Outlook 2007/2010 在表格单元格内添加空间

Question

我正在构建一个响应式时事通讯，它可以在除 Outlook 2007 和 2010 之外的所有浏览器和电子邮件客户端中正确显示（尽管在 Outlook 2003 和更早版本以及 2013 和更高版本上都可以）。

在此标题的一个表格单元格内添加了一个额外的 18px 空间：

加上一些解释：

1 是我的第一个单元格中的一个表格，它似乎具有有效的高度（186 像素）。 2 和 3 图片的高度为 186px，但它们的单元格更大。

这是标题 html：

<tr>
  <td align="left" valign="top">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" valign="top" style="border-collapse: collapse !important; background-color:#ffffff;" bgcolor="#ffffff">
      <tr>
        <td width="225" height="186" bgcolor="#7c64a9" class="nd-bandeau-cell1" style="background-color: #7c64a9">
          <table width="100%" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
            <tr>
              <td width="20" rowspan="5" class="head-left-margin"> </td>
            </tr>
            <tr>
              <td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 9px; line-height: 9px;">
                <img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
              </td>
            </tr>
            <tr>
              <td height="120" align="right" valign="bottom" class="nd-bandeau-titre-cell">
                <img src="http://mywebsite/img/titre-lettre.jpg" width="204" height="71" alt="La lettre de votre patrimoine" class="nd-bandeau-titre" style="font-family: Arial, sans-serif; color: #ffffff; font-size: 20px;" />
              </td>
            </tr>
            <tr>
              <td height="44" align="left" valign="top" class="nd-bandeau-stitre-cell" style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color: #ffffff;">
                N&deg;1 | Octobre 2015
              </td>
            </tr>
            <tr>
              <td height="13" align="left" valign="top" class="nd-bandeau-left-bottom-cell" style="mso-line-height-rule: exactly; font-size: 13px; line-height: 13px;">
                <img src="http://mywebsite/img/head-left-bottom.gif" width="205" height="13" alt="" class="nd-bandeau-left-bottom" style="display: block;" />
              </td>
            </tr>
          </table>
        </td>
        <td width="178" height="186" align="left" valign="middle" class="nd-bandeau-cell2">
          <img src="http://mywebsite/img/bandeau-left.jpg" width="178" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
        </td>
        <td width="197" height="186" align="left" valign="middle" class="nd-bandeau-cell3">
          <img src="http://mywebsite/img/bandeau-right.jpg" width="197" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
        </td>
      </tr>
    </table>
  </td>
</tr>

我尝试了很多修复，但都没有奏效：将 line-height 添加到之前包含带有 mso-line-height-rule: exactly 的图像的单元格中，折叠 HTML 以删除任何空间，更改文档类型......我有点没有想法，任何人知道这里发生了什么吗？

Answer 1

这是因为您有一个

解决方法：

<tr valign="bottom">
    <td height="9" style="font-size:9px; line-height:9px;">
        &nbsp;
    </td>
</tr>

我通常通过使用padding-top 和底部tds 来解决这个问题（在需要时嵌套表）

Answer 2

我发现出了什么问题，这很简单。我的表格的第一行（带有rowspan 的那个）缺少第二个单元格 - 所以表格布局错误。

只需改变：

<tr>
  <td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
  <td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
    <img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
  </td>
</tr>

收件人：

<tr>
    <td width="20" rowspan="4" class="head-left-margin"> </td>
    <td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
    <img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
  </td>
</tr>

解决了这个问题。之后，在高度 mso-line-height-rule 将line-height 和font-size 更改为0px（设置图像的高度对我不起作用）来修复它，在图像上添加margin: 0 并通过折叠代码以在图片之前/之后不留空间。

例如：

<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 0px; line-height: 0px;"><img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /></td>

通过所有这些修复，我的标题现在可以在所有电子邮件客户端上完美显示。