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电子邮件构建中的标准做法，因为电子邮件客户端中的CSS支持很差，尤其是Outlook。

保持你的桌面结构，但尝试这些添加：

将valign="bottom"添加到包含box_dark_top.gif和valign="top"到下两个单元格的td单元格
对于每张图片，请将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>

Answer 2

Outlook 2007以后使用Word来呈现HTML。这是an article about this，其中包含指向更具有强烈意见的文章和网站的链接。

也许您可以尝试在Word（或Outlook本身）中设计邮件？当然，它可能无法在理智的电子邮件客户端中正确呈现。

Answer 3

设置TD的高度以及应具有固定高度的任何其他TD：

<td valign="bottom" height="10" width="200">

*您还应该在电子邮件中使用所有TD的宽度。

Answer 4

我发现Outlook正在包装img标签，并且只要他们“感觉”喜欢就设置一个margin-top。您可以通过将电子邮件另存为html来检查生成的html。

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

4 个答案: