Question

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

此标题的一个表格单元格中添加了额外的18个像素空间：

有一些解释：

1 是我的第一个单元格中的一个表，它似乎具有有效高度（186px）。 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以删除任何空格，更改doctype ...我有点不在这里的想法，任何人都知道这里发生了什么？

Answer 1

这是因为你有一个单元格（第7行）＆lt; 15px高。 Outlook 2007和13会将您拥有的任何单元格扩展为15。

解决方法：

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

我通常使用padding-top和td的底部（需要时嵌套表）来实现这一目标

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>

修正了问题。之后，我的图像在高度<1的单元格中之后仍然有一个像素垂直间距。 15px的。感谢zazzyzeph的回答，我通过将line-height和font-size更改为0px（设置图像的高度并不适合我）来修复它mso-line-height-rule ，在图像上添加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>

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

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

2 个答案: