Outlook 中 HTML 电子邮件表格中 TD 元素下方的空格不一致（2007 和 2010）
我研究过这个问题，在网上找到了许多建议的修复方法，但没有任何效果。
问题是我正在设计的 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”样式，这也是所有建议的解决方法。这些都没有产生丝毫影响。
此问题不会出现在任何其他电子邮件客户端或浏览器中。
请帮忙！
I've researched this problem, finding many suggested fixes on the web, but nothing is working.
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.
Here is a link to a screen grab of the problem
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>
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.
Please help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
使用表格是 html 电子邮件构建中的标准做法，因为电子邮件客户端（尤其是 Outlook）中的 CSS 支持很差。
保持表格结构，但尝试添加以下内容：
valign="bottom"添加到包含 box_dark_top.gif 的 td 单元格，将valign="top"添加到接下来的两个单元style="display:block;margin:0;padding:0"使用内联 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"to the td cell containing box_dark_top.gif andvalign="top"to the next two cellsstyle="display:block;margin:0;padding:0"Use inline css rather than internal
Outlook 2007 及更高版本使用 Word 呈现 HTML。这是有关此问题的文章，其中包含指向更强烈观点的文章和网站的链接。
也许您可以尝试在 Word（或 Outlook 本身）中设计您的消息？当然，它可能无法在正常的电子邮件客户端中正确呈现。
Outlook 2007 onward uses Word to render HTML. Here's an article about this, with links to more strongly-opinionated articles and websites.
Maybe you could try designing your message in Word (or Outlook itself)? Of course then it may not render properly in a sane email client.
设置 TD 以及任何其他应具有固定高度的 TD 的高度：
*您还应该在电子邮件中的所有 TD 上使用宽度。
Set the height of the TD as well as any other TD that should have a fixed height:
*You should also be using width on ALL TD's in email.
我发现 Outlook 会在他们“感觉”喜欢的时候用 margin-top 来包裹 img 标签并设置其样式。您可以检查将电子邮件另存为 html 生成的 html。
I've found out that Outlook is wrapping img tags with and styling a margin-top whenever they "feel" like it. You can check the html generated by saving the email as html.