超文本标记语言NewsLetter中图像的绝对定位
我有我的html新闻信件的主图像，我试图在我的主图像顶部的某些位置的5个图像(图像按钮)。如果我把它们放在绝对的位置，在网页浏览器中显示时效果很好，只要我把html页面嵌入到电子邮件(outlook)中，图像就会被抛到一边。
当涉及到html News Letters时，什么是实现这一点的最好方法。
任何建议都将不胜感激。
回答 2
Stack Overflow用户
发布于 2013-02-22 22:24:09
@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而不是xhtml，但除了自关闭img标记外，效果是一样的。
Stack Overflow用户
发布于 2013-02-22 09:08:48
我刚刚花了一周的时间在一封电子邮件上，太痛苦了！我发现处理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/en-us/library/aa338201.aspx
一般html电子邮件提示- http://www.verticalresponse.com/sites/www.verticalresponse.com/files/html_tips_for_email_guide.pdf
希望这能帮上忙..
https://stackoverflow.com/questions/15012597
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号