12

我知道 HTML 电子邮件需要使用非常老派的布局 - 根据 SO 上的许多其他答案（例如HTML 电子邮件：表格或 div？，使用 CSS的HTML 电子邮件）。

然而，对于在电子邮件中使用间隔 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 的电子邮件客户端？这两种方式有什么危害吗？

4

4 回答 4

13

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

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

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

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

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

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

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

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

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

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

于 2012-05-24T06:20:34.563 回答
3

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

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

<tr>
 <td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td>
</tr>
于 2012-05-30T01:51:12.280 回答
2

如果你让你的单元格高于 19px（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;这与原始示例在间隔单元中也有 a 的原因相同。如果您要在下面添加多行或填充，它将如下所示：

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

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

于 2013-12-19T14:27:54.427 回答
1

注意：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>
于 2013-03-14T14:55:51.100 回答