Outlook(2007 和 2010)HTML 电子邮件表格中 TD 元素下方的不一致空格 [英] Inconsistent spaces below TD elements in tables in HTML email in Outlook (2007 and 2010)

问题描述

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

I've researched this problem, finding many suggested fixes on the web, but nothing is working.

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

The problem is the gap between a specific TD element in a table in an HTML email I'm designing. It's displaying this way only in Outlook 2007 and 2010.

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

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

In the sidebar on the right, there should be no gap between "Level 2" and the thin rounded corner box above it.

这是创建蓝色框的嵌套表的代码:

Here is the code for the nested table that creates the blue box:

<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' 样式，同样是所有建议的变通方法.这些都没有产生丝毫的不同.

As you can see, I've removed all white space as this was suggested in one of the work-arounds I found. I've also inserted the 'line-height:0;font-size:0' style in the TD element and the 'display:block' style in the image itself, again all suggested work-arounds. None of these has made the slightest difference.

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

This problem does not appear in any other email client or browser.

请帮忙！

推荐答案

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

Using tables is standard practice in html email builds because css support is poor in email clients, particularly Outlook.

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

Keep your table structure but try these additions:

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

• 使用内联 css 而不是内部

• Add valign="bottom" to the td cell containing box_dark_top.gif and valign="top" to the next two cells
• For each image, set the css as style="display:block;margin:0;padding:0"

• Use inline css rather than internal

<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>

这篇关于Outlook(2007 和 2010)HTML 电子邮件表格中 TD 元素下方的不一致空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！