编码 HTML 电子邮件时是否需要使用间隔图像？答案

【问题标题】：Do I need to use spacer images when coding HTML emails?编码 HTML 电子邮件时是否需要使用间隔图像？
【发布时间】：2012-05-30 17:20:44
【问题描述】：

我知道 HTML 电子邮件需要使用非常老派的布局 - 根据 SO 上的许多其他答案（例如 HTML email: tables or divs?、HTML Email using CSS）。

但是，对于在电子邮件中使用间隔 gif 是否仍然是一个好主意，似乎存在一些争论。

例如，比较这三种布局：

尺寸：

<table cellpadding="0" cellspacing="0" border="0" width="100">
  <tr>
    <td width="100" height="10"></td>
  </tr>
</table>

带间隔 GIF：

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td><img src="spacer.gif" width="100" height="10"></td>
  </tr>
</table>

带有间隔 GIF 和尺寸：

<table cellpadding="0" cellspacing="0" border="0" width="100">
  <tr>
    <td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td>
  </tr>
</table>

如何将它们与尺寸一起使用？是否有仍然需要间隔 gif 的电子邮件客户端？这两种方式有什么危害吗？

【问题讨论】：

标签： email html-email

【解决方案1】：

就我个人而言，我从不使用间隔 gif，因为它们会在图像屏蔽关闭时破坏布局，原因有以下三个：

如果它们根本不渲染，任何需要间隔图像的布局都会丢失。
如果它们渲染不正确（例如恢复到其原始大小，或与其原始大小成比例），它们会破坏布局。
即使它们确实呈现正确并且布局正常，打开图像阻止时显示的所有图像占位符也会分散电子邮件消息的注意力。

要解决问题 #2，您可以保存每个图像的实际尺寸。然而，这显然增加了：

构建时间
客户端要下载的图片数量

它不能解决问题 #1 和 #3。

使用间隔 gif 的原因是因为某些客户端（Outlook 2007、Outlook 2010、Lotus Notes、Hotmail / Live Mail）不会呈现空单元格。在文本节点的尺寸上获得绝对精度是非常困难的，因此间隔图像就足够了。但是，即使是提到的那些客户端也会呈现一个空单元格定义了宽度。

只要您在任何空单元格上定义像素宽度就可以了。回到问题中的例子：

仅尺寸 - 在所有主要电子邮件客户端中使用和不使用图像阻止功能
仅限间隔图像 - 仅在图像阻止关闭时有效
尺寸和间隔图像 - 仅在图像阻止关闭时有效

因此，您应该使用尺寸而不是间隔 gifs。

各种文章也谈到了这个问题（在页面上搜索“间隔图像”）

【讨论】：

我不明白：你问一个问题就马上回答……这是干什么用的？
@Marco 我在另一个帖子上与某人进行了讨论 - 这个问题与 OP 无关，所以我不想在 cmets 中辩论它。我找不到关于此的现有 Q+A，所以写了一个并链接到它。
“那些提到的客户将呈现一个定义了宽度的空单元格” - 任何具有其他客户综合列表的来源？
@Pumbaa80 一些客户端（一个版本的 Outlook，我认为是 Thunderbird）会扩展占位符以适应警告消息或 alt 标签。其他客户端按比例扩展图像 - 因此不是将 1x1 图像拉伸为 1x10，而是变为 10x10。在这两种情况下，图像尺寸都会覆盖您的单元格尺寸，因此现在布局已损坏。鉴于只要您在单元格上定义宽度，所有客户端都可以正常工作（除了 Lotus Notes
@Pumbaa80 综合名单？在 Litmus 上测试的所有内容，以及其他一些内容。在 7 年的电子邮件编码中，我没有遇到过一个客户，只要定义了单元格宽度，就没有包含间隔 gif 的问题。 “最佳实践建议”可以追溯到 IE4 和 Netscape 时代，但自 90 年代后期以来一直没有问题。

【解决方案2】：

您绝对可以避免使用间隔 gif。

我发现以下代码适用于所有客户端。我通常指定这些空单元格的宽度或高度。这个具体的例子是我用来创建垂直空间的：

<tr>
 <td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td>
</tr>

【讨论】：

如果您指定高度或宽度，您甚至不需要&nbsp;。另外，我认为font-size:0;line-height:0; 在某些客户端中可能会被忽略，因此您最终会得到默认的 14px &nbsp;。由于支持/不支持的内容的组合，可能不会显示为渲染问题，但我认为它比根本不使用它更容易出错。
这是使它在 Outlook 中工作的正确代码，哪些电子邮件客户端不支持它？

【解决方案3】：

如果您将单元格设置为高于 19 像素（Outlook 的最小默认高度），则无需使用 line-height，简单的 <td height="20">&nbsp;</td> 效果很好。示例：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td height="20">
      &nbsp;
    </td>
  <tr>
  </tr>
    <td align="center">
      bottom
    </td>
  </tr>
</table>

但是，对于垂直间距，在大多数情况下，您可能可以避免这样做并在上方或下方的行中添加填充：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td align="center" style="padding-top:20px;">
      bottom
    </td>
  </tr>
</table>

或者像这样，没有填充：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td align="center">
      &nbsp;<br>
      bottom
    </td>
  </tr>
</table>

请注意我使用&nbsp;<br> 而不仅仅是<br> 的最后一个示例。这是因为 Outlook 将折叠其中没有内容的任何行或单元格。这与原始示例在间隔单元格中也有&nbsp; 的原因相同。如果您要在下面添加多行或填充，它将如下所示：

<td align="center">
  &nbsp;<br>
  &nbsp;<br>
  &nbsp;<br>
  bottom
  <br>&nbsp;
  <br>&nbsp;
  <br>&nbsp;
</td>

没有间隔单元的这两个选项有几个好处。首先是它更快并且包含更少的代码。第二个是当有人将您的电子邮件转发出 Outlook 时，它的呈现更加一致。 Outlook 出色的 MS Word 引擎将所有内容都包含在 <p> 标记中，这在行之间添加了不可避免的间隙。少一行将使您的电子邮件更接近您的原始设计。

【讨论】：

【解决方案4】：

注意：Outlook 2007/2010 将空单元格视为空格。 AND 对它们应用默认文本和背景颜色属性。（因此，如果您的用户喜欢紫色背景，则没有颜色的单元格会出现紫色背景）。

要以这种方式抵消这种格式的空白间隔单元格：

<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")>&nbsp;</td>

【讨论】：