1

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

请让我知道如何解决它。

4

3 回答 3

4

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

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

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

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

于 2013-07-31T15:52:52.307 回答
0

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

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

于 2013-07-30T22:09:00.060 回答
0

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

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

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

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

于 2013-07-30T23:37:35.257 回答