html - Outlook(2007 和 2010)中 HTML 电子邮件表格中 TD 元素下方的空格不一致

Question

我研究了这个问题，在网上找到了许多建议的修复方法，但没有任何效果。

问题是我正在设计的 HTML 电子邮件中表格中特定 TD 元素之间的差距。它仅在 Outlook 2007 和 2010 中以这种方式显示。

这是一个link to a screen grab of the problem

在右侧的侧边栏中，“Level 2”与其上方的细圆角框之间不应有间隙。

下面是创建蓝框的嵌套表格的代码:

<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>

如您所见，我删除了所有空白区域，因为这是我发现的一种解决方法中建议的。我还在 TD 元素中插入了 'line-height:0;font-size:0' 样式，在图像本身中插入了 'display:block' 样式，同样是所有建议的解决方法。这些都没有产生丝毫影响。

此问题不会出现在任何其他电子邮件客户端或浏览器中。

请帮忙!

Answer 1

在 html 电子邮件构建中使用表格是标准做法，因为电子邮件客户端(尤其是 Outlook)对 css 的支持很差。

保留您的表结构，但尝试添加以下内容:

• 将 valign="bottom" 添加到包含 box_dark_top.gif 的 td 单元格，并将 valign="top" 添加到接下来的两个单元格
• 对于每张图片，将 css 设置为 style="display:block;margin:0;padding:0"

• 使用内联 css 而不是内部

  <table class="box" width="200" border="0" cellspacing="0" cellpadding="0">
  <tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr>
  <tr>
      <td valign="top" class="box_dark">
          <h2>Level 2<br /><span class="white">Care Assistants</span></h2>
          <h2>Level 3<br /><span class="white">Senior Carers</span></h2>
          <h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2>
      </td>
  </tr>
  <tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>