Html电子邮件模板图像周围的空间

Question

我正在编码html email template，因为模板中的图形工作，我确实将psd切片为html，现在的问题是它在我的浏览器中看起来很完美但是当我将它发送到我的电子邮件ID时，你会遇到一些问题可以在附图中看到  

现在这是<tr> 3 <td>，但问题是左蓝图和徽标之间有差距，一个完全正常，此<tr>的代码是：

<tr>
    <td colspan="2">
        <img src="left.jpg" alt="top_left" width="220" height="102" border="0">
    </td>
    <td colspan="2">
        <a href="http://www.google.com">
        <img src="logo.jpg" width="191" height="102" border="0" alt="Logo"></a>
    </td>
    <td colspan="3">
        <img src="right.jpg" alt="top_right" width="200" height="102" border="0">
    </td>
</tr>

请告诉我如何解决这个问题。

Answer 1

此外，请确保始终在图像上使用此样式：display：block;

有些邮件客户端会使用您的代码（看着你，gmail）做任何他们想做的事情，除非你指定你的图像被渲染为块元素，否则会在这些元素周围添加空白区域。

gmail有几个重要的修复方法。黑色链接应始终显示为＃000001（gmail会删除链接上的黑色，以及会话中冗余内容的常规文本（除非您指定文本颜色为＃000001，否则重新发布时会将此文本设为紫色））

此外，请确保为TD的高度和宽度使用内联样式，有时常规html值不会。

Answer 2

删除a标记后的空格。还要确保表的cellspacing，cellpadding和border设置为0.您可能需要删除单元格中的所有空格。

电子邮件浏览器很乱。 IE6更是如此; - ）。

Answer 3

如果将这条线保持在一起，使用单个图像可能是一个更容易的解决方案。

除非您知道每个收件人将使用哪个电子邮件用户代理查看电子邮件，否则很难以您提议的方式定位它们。每个电子邮件客户端可能使用不同的渲染器，导致它们错误地显示空白。有时，当使用较旧的电子邮件客户端时，您需要删除所有空格和换行符以使基于表格的格式正确显示;这意味着将所有HTML放在一行上。

另外，请注意，如果收件人正在HTML5中查看内容，则border元素的img属性已过时;将style="border: 0;"添加到img元素是正确的。您可能想尝试在表格单元格和行上使用style="margin: 0; padding: 0; border: 0;"。

确保将表格设置为折叠，使用
<table style="border-collapse: collapse;">