Question

我有一个简单的html模板，当我在浏览器上预览时，它正常工作，但是当我尝试将其作为html添加到我的Outlook中以将其作为时事通讯发送时，它都搞砸了......背景图像不是显示，我的桌子搞砸了等等......

这是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table background="/images/background" width="727" border="0">
  <tr>
    <td width="48">&nbsp;</td>
    <td width="314">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><img src="/images/header.png" /></td>
  </tr>
  <tr>
  <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="49">&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
    <td width="314" style="margin-left: 88%;"><img src="/images/aparati.png"/></td>
    <td width="377" style="margin-right: 55%"><h1 style="color: white; font-family: Verdana, Geneva, sans-serif;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></td>
  </tr>
  <tr>
    <td valign="top"></td>
    <td><h2 style="color: white; font-family: Verdana, Geneva, sans-serif;">&nbsp;</h2></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><img src="/images/footer.png" /></td>
  </tr>
</table>
</body>
</html>

Answer 1

背景图片是大多数电子邮件客户端非常支持的事情之一。 GMail完全忽略了它们，你会发现的大多数黑客都不值得麻烦，因为它们甚至在同一个电子邮件客户端的不同版本之间也不一致。

您可以做的最好的方法是尝试重新排列布局，只需合成图像切片和背景标记颜色即可获得令人满意的效果。

最好使用HTML电子邮件预检服务或软件来检查不同电子邮件客户端中预期的类型或结果。我个人最喜欢的是http://premailer.dialect.ca/。

Answer 2

如果您将图片添加到电子邮件简报中，请提供完整的网址。

<td colspan="4"><img src="/images/header.png" /></td>

将是

<td colspan="4"><img src="http://www.mysite.nl/images/header.png" /></td>

并非所有电子邮件客户端都会拍摄背景图片。我发现一个解决方法，通常是尝试使它们成为正常的图像。如果可能的话。是否需要调整背景图像前面的文字？如果没有，请将其添加为单个图像。如果它确实需要改变，也许它在图像的平淡部分？如果是这样，您可以剪切它，并使用背景颜色，电子邮件客户端支持更多。如果两者都不成立，那么可能需要调整设计。

确保所有TR在彼此之上，具有相同数量的TD。否则它会搞砸。

<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="49">&nbsp;</td> // This one has 4 TD's
</tr>
<tr>
    <td>&nbsp;</td>
    <td width="314" style="margin-left: 88%;"><img src="/images/aparati.png"/></td>
    <td width="377" style="margin-right: 55%"></td> // This one has 3
</tr>
<tr>
    <td valign="top"></td>
    <td><h2 style="color: white; font-family: Verdana, Geneva, sans-serif;">&nbsp;</h2>
</td> // This one has 2
</tr>

如果您想使用不同的测量值/数量的TD，请像在其他区域一样使用colspan，或者关闭桌子并打开一个新的。还要确保任何CSS是内联的，但是你做到了。祝你好运！

Answer 3

您可以在http://www.campaignmonitor.com/css/

查看浏览器支持和支持的元素

Answer 4

当您说“将其附加到Outlook中”时，这可能就是问题所在。如果你没有正确发送，没有任何东西能按预期工作。

除此之外，如上所述，您需要绝对图像链接（托管）才能显示它们。

您应该在所有表格单元格（特别是第一行）上设置宽度，否则Outlook会搞砸它们。

也将颜色声明更改为6位十六进制，因此white应始终为#FFFFFF。

我的html模板在outlook中搞砸了

4 个答案: