Question

我的html新闻信的主图像，我试图在我的主图像的某些位置放置5个图像（图像按钮）。如果我用绝对定位它们会在网页浏览器中显示时呈现正常，只要我将html页面嵌入电子邮件（outlook）中，图像就会被抛到一边。

关于html新闻快报，实现这一目标的最佳方法是什么。

非常感谢任何建议。

Answer 1

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

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

最好和最常见的解决方案是将大图像分解成较小的图像，并将其放在表格中。对于每个图像，您可以分配一个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电子邮件的最佳方法是使用表格布局。有很多标签对电子邮件不起作用。每个电子邮件客户端都有很多不同的东西。展望是我最讨厌的！

如果您使用的图像上没有任何链接，请使用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/en-us/library/aa338201.aspx

一般的html电子邮件提示 - http://www.verticalresponse.com/sites/www.verticalresponse.com/files/html_tips_for_email_guide.pdf

希望这会有所帮助..

Html NewsLetter中图像的绝对定位

2 个答案: