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

Question

我研究了这个问题,在网上找到了许多建议的修复,但没有任何工作.

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

这是一个屏幕抓取问题的链接

在右侧边栏中,"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>