Outlook 2007/2010 在 table 单元格中添加 space

Question

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

在这个 header:

的 table 单元格中添加了一个额外的 18px space

加上一些解释：

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

这里是 header 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>

我尝试了很多修复，none 成功了：将 line-height 添加到包含之前带有 mso-line-height-rule: exactly 的图像的单元格，折叠 HTML 以删除任何 space, 更改文档类型...我在这里有点不知所措，有人知道这里发生了什么吗？

Answer 1

这是因为您的单元格（第 7 行）的高度 < 15 像素。 Outlook 2007 和 13 会将您拥有的任何单元格扩展到 15。

解决方法：

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

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

Answer 2

我发现了问题所在，这很微不足道。我的 table 的第一行（带有 rowspan 的行）缺少第二个单元格 - 因此 table 布局错误。

只需更改 :

<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>

已解决问题。之后，在高度 < 15px 的单元格中的图像之后，我仍然有一个像素的垂直间距。感谢 zazzyzeph 的回答，我通过将 line-height 和 font-size 更改为 0px（设置图像的高度对我不起作用）和 mso-line-height-rule 来修复它，添加margin: 0 在图像上并折叠代码以不留下 space before/after 图片。

例如：

<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>

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

Outlook 2007/2010 在 table 单元格中添加 space

Outlook 2007/2010 adding space inside table cell

html

css

email

outlook

html-email