Question

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

然而，在电子邮件中使用spacer Gif仍然是一个好主意似乎存在争议。

例如，比较这三种布局：

尺寸：

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

WITH SPACER GIF：

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

使用SPACER 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？这两种方式都有害吗？

Answer 1

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

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

要解决问题＃2，您可以使用实际尺寸保存每个图像。但是，这显然会增加：

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

并没有解决问题＃1和＃3。

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

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

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

因此，你应该使用尺寸而不是间距GIF 。

各种文章也谈论这个问题（在页面上搜索'spacer images'）

Answer 2

你绝对可以避免使用间隔Gif。

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

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

Answer 3

如果你的单元格高于19px（Outlook的默认高度），你永远不需要使用行高，简单的<td height="20"> </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>

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

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

没有间隔单元的两种选择有两个好处。首先是它更快，包含更少的代码。第二，当有人将您的电子邮件转发出Outlook时，它会更加一致。 Outlook精彩的MS Word引擎将所有内容包装在<p>标签中，这会在行之间增加不可避免的间隙。减少一行将使您的电子邮件更接近您的原始设计。

Answer 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>

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

4 个答案: