Outlook中的HTML电子邮件中的表格中TD元素之下不一致的空格（2007年和2010年） [英] 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.

问题是一个特定的TD元素之间的差距我正在设计的HTML电子邮件中的表格。它仅在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.

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

在右侧边栏中， 2级和它上面的细圆角框之间应该没有差距。

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

这是创建蓝框的嵌套表的代码： p>

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电子邮件构建中的标准做法，因为css支持在电子邮件客户端，特别是Outlook

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和 valign =top的td单元格到下两个单元格
• 
  
• 对于每个图像，将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中的HTML电子邮件中的表格中TD元素之下不一致的空格（2007年和2010年）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！