我了解HTML电子邮件需要使用非常古老的学校布局-根据SO上的许多其他答案(例如HTML email: tables or divs?HTML Email using CSS)。

但是,对于在电子邮件中使用spacer gifs是否仍然是一个好主意,似乎存在一些争议。

例如,比较以下三种布局:

方面:

<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的电子邮件客户端?两种方式都有害吗?

最佳答案

我个人从来不使用spacer gif,因为关闭图像阻止功能时它们会破坏布局,原因有以下三个:

  • 如果它们根本不渲染,则任何需要间隔图像的布局都会丢失。
  • 如果它们渲染不正确(例如恢复为原始大小或成比例地恢复为原始大小),则会中断布局。
  • 即使它们可以正确渲染并且可以进行布局,打开图像阻止功能时显示的所有图像占位符也会从电子邮件中分散注意力。

  • 要解决问题2,您可以保存每个图像及其实际尺寸。但是,这显然增加了:
  • 构建
  • 的时间
  • 客户端
  • 要下载的图像数

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

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

    因此,只要您在任何空白单元格上定义像素宽度,就可以了。回到问题中的示例:
  • 仅限尺寸-在所有主要电子邮件客户端中使用和不使用图像阻挡功能
  • 仅间隔图片-仅在关闭图像阻止功能时才有效
  • 尺寸和间隔图像-仅在关闭图像阻挡时有效

  • 因此,应该使用尺寸而不是gifs 间隔符。

    各种文章也谈到了这个问题(在页面上搜索“间隔图片”)
  • http://www.banane.com/workblog/?p=61
  • http://www.campaignmonitor.com/design-guidelines/
  • 关于email - 对HTML电子邮件进行编码时是否需要使用间隔图片?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10732164/

    10-12 05:50