Html 电子邮件模板 <td> 图像周围的空格答案

【问题标题】：Html email Template <td> Spaces around imagesHtml 电子邮件模板 <td> 图像周围的空格
【发布时间】：2013-07-31 05:21:31
【问题描述】：

我正在编码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>

请告诉我如何解决它。

【问题讨论】：

先生的电子邮件总是使用
是的，你是对的，你能帮我解决一下这里有什么问题吗？
我敢打赌，表格不受图像像素宽度的限制。
我做了调整，但还是不行
上面的行有 7 个 td 吗？请将整个表格与其他行一起发布，因为 colspans 取决于那里的内容

标签： html css email html-email html-table

【解决方案1】：

删除a 标记后的空格。还要确保表格的单元格间距、单元格填充和边框设置为 0。您可能需要删除单元格中的所有空白。

电子邮件浏览器一团糟。比 IE6 还要多 ;-)。

【讨论】：

【解决方案2】：

如果将线条保持在一起很重要，那么仅使用单个图像可能是一种更简单的解决方案。

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

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

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

【讨论】：

【解决方案3】：

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

一些邮件客户端会对你的代码做任何他们想做的事情（看着你，gmail），除非你指定你的图像呈现为块元素，它会在这些元素周围添加空格。

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

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

【讨论】：