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

【问题标题】：Inconsistent spaces below TD elements in tables in HTML email in Outlook (2007 and 2010)Outlook（2007 和 2010）中 HTML 电子邮件表格中 TD 元素下方的空格不一致
【发布时间】：2012-06-01 18:17:49
【问题描述】：

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

问题是我正在设计的 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' 样式，这也是所有建议的解决方法。这些都没有造成丝毫不同。

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

请帮忙！

【问题讨论】：

标签： html email outlook outlook-2007 outlook-2010

【解决方案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>

【讨论】：

尝试使用应用于 HTML 元素而不是类的内联样式，它有时会修复渲染。

【解决方案2】：

Outlook 2007 及更高版本使用 Word 呈现 HTML。这里是an article about this，带有指向更强烈的文章和网站的链接。

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

【讨论】：

是的，这可能会导致问题，因为 Outlook 2007/2010 会忽略一些应用的样式。您可以单击回复或转发并从 Word 中保存 HTML，以查看 HTML 和 CSS 的问题。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

我发现 Outlook 会在他们“感觉”喜欢时使用顶部边距包装 img 标记并设置其样式。您可以检查通过将电子邮件保存为 html 生成的 html。

【讨论】：