HTML NewsLetter中图像的绝对定位

Question

我的html新闻信有一个主图像，我试图在主图像的某些位置上放置5个图像（图像按钮）。 如果我将它们放置在绝对位置，则在Web浏览器中显示时，它会呈现良好的效果，将html页面嵌入到电子邮件中（外观）后，图像就会扔到一边。

什么是实现html News Letters的最佳方法。

任何建议将不胜感激。

Answer 1

@ user1475479您可以使用VML创建背景图像，然后使用标准表格布局将图像按钮放在顶部，例如下面的示例。

另一种选择是使用一张大图片并使用图片地图 ，但这在电子邮件中是一种不好的做法，因为许多订阅者无法打开图片，在这种情况下，您的电子邮件将为空白，并且他们不会看到您的按钮。

最好和最常见的解决方案是将大图像分解为较小的图像，然后将其放在桌子上。 这样，您可以为每个图像分配一个alt标签，因此，如果订户不加载图像，它仍然保留其结构，人们仍然知道单击的内容和位置。 注意-添加display：block; 只要它们单独放在表格单元格中，您就可以访问它们。

@lukeocom-您的示例有一些问题，我在下面重新构建，而不是编辑您的回复。 您的图片都必须具有style="display:block;" 并且最好以像素为单位设置宽度和高度。 另外，您需要将所有颜色声明为6位十六进制代码，并且在html声明中不需要包含px（css才需要）。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#959595">
<tr>
    <td colspan="3" width="600" bgcolor="#757575">
        <a href=""><img src="yourHeader.png" alt="Header" style="margin: 0; border: 0; padding: 0; display: block;" height="100"  width="600"></a>
    </td>
</tr>
<tr>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
    <td width="500" valign="top" style="padding:20px;">
      <font style="font-family: Century Gothic, Avant Garde, sans-serif; font-size: 14px; color: #000000;">
        PUT YOUR CONTENT HERE
      </font>
    </td>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
</tr>
<tr>
    <td colspan="3">
        <a href=""><img src="yourFooter.png" alt="Footer" style="margin: 0; border: 0; padding: 0; display: block;" height="100" width="600"></a>
    </td>
</tr>

如果您想让整个东西居中浮动，则将其包装为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">           
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding:30px;">

PUT THE ABOVE TABLE IN HERE

</td></tr></table></td></tr></table></body></html>

我使用html strict而不是xhtml，但其工作原理相同，但减去了自闭合img标签。

Answer 2

我刚刚过去一周只用一封电子邮件，真是太痛苦了！ 我发现html电子邮件的最佳方法是使用表格布局。 有很多标签对电子邮件不起作用。 每个电子邮件客户端都有很多不同的呈现方式。 Outlook是我最讨厌的！

如果您使用的图像上没有任何链接，请使用photoshop创建页眉和页脚横幅，然后使用表格布局显示它们。 也使用内联样式，因为有时不支持id或类名。 最好还是要安全...

按行的表格布局示例为：

|header image|
|side bar image(optional) | content (can use another table here) | side bar image|(optional)
|footer image|

这是临时的。

<table style="font-size:10pt;background-color: #fff; width:600px;max-width:600px;overflow:hidden; margin: 0px auto; padding: 0px;border-collapse:collapse;border:0;">
    <tr>
        <td colspan="3" width="600px">
            <img src="yourHeader.png" alt="" style="vertical-align:bottom;" height="100%"
            width="100%" />
        </td>
    </tr>
    <tr>
        <td width="50px" style="vertical-align: top;background-color:#fff;">
            <img src="sideBars.png" alt="" height="100%" width="100%" />
        </td>
        <td width="500px" style="background-color:#fff;padding-left:20px;padding-right:20px;">PUT YOUR CONTENT HERE</td>
        <td width="50px" style="vertical-align: top;background-color:#333399;">
            <img src="sideBars.png" alt="right image" height="100%" width="100%" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="yourFooter.png" alt="Bottom banner image" style="vertical-align:top;"
            height="100%" width="100%" />
        </td>
    </tr>
</table>

一些进一步的阅读...

Outlook CSS和标记支持-http://msdn.microsoft.com/zh-cn/library/aa338201.aspx

通用HTML电子邮件提示-http: //www.verticalresponse.com/sites/www.verticalresponse.com/files/html_tips_for_email_guide.pdf

希望这可以帮助..