我有一个客户想要向在其网站上注册的用户发送礼券。他们想要它所有的设计，所以我不能只发送文本电子邮件。我试图将文本定位在图像上，以便它仍然是动态的。
我想用绝对定位这样做。一些电子邮件系统喜欢它。有些人讨厌。 Gmail碰巧讨厌它。
我们正在为广告系列使用MailChimp。这是电子邮件的完整来源。以下是只是不工作的代码段。
- <html>
- <head>
- <!-- This is a simple example template that you can edit to create your own custom templates -->
- <Meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <title>*|MC:SUBJECT|*</title>
- <style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head>
- <body style="background-color: #bab145;text-align: center;">
- <table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;">
- <tr>
- <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
- <img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
- <div style="position: absolute; top: 110px; left: 130px;">
- *|FNAME|* *|LNAME|*</div>
- <div style="position: absolute; top: 140px; left: 130px;">
- GetFreePellets.com</div>
- <div style="position: absolute; top: 166px; left: 130px;">
- $100</div>
- <div style="position: absolute; top: 200px; left: 370px;">
- *|COUPONCODE|*</div>
- </div>
- </td></tr>
- <tr>
- <td id="footer" style="background-color: #eeeeee;border-top: 0px none #ffffff;padding: 20px;font-size: 10px;color: #333333;line-height: 100%;font-family: Verdana;">
- <p><a href="*|ARCHIVE|*" class="adminText" style="color: #800000;text-decoration: underline;font-weight: normal;">view email in browser</a> | <a href="*|UNSUB|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Update your profile</a> | <a href="*|FORWARD|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Forward to a friend</a></p>
- <p>*|LIST:DESCRIPTION|*</p>
- <p>*|HTML:LIST_ADDRESS_HTML|*</p>
- <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p>
- </td>
- </tr>
- </table>
- <span style="padding: 0px;"></span>
- <center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
- <td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
- Sent to *|EMAIL|*. <a href="*|UNSUB|*" style="font-family:Verdana,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> |
- <a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> |
- <a href="*|FORWARD|*" style="font-family:Verdana,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a>
- </td>
- <td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
- *|REWARDS|*
- </td>
- </tr></table></center></body>
- </html>
只是我担心的片段：
- <tr>
- <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
- <img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
- <div style="position: absolute; top: 110px; left: 130px;">
- *|FNAME|* *|LNAME|*</div>
- <div style="position: absolute; top: 140px; left: 130px;">
- GetFreePellets.com</div>
- <div style="position: absolute; top: 166px; left: 130px;">
- $100</div>
- <div style="position: absolute; top: 200px; left: 370px;">
- *|COUPONCODE|*</div>
- </div>
- </td></tr>
注意：MailChimp合并变量是|之间的那些事和|。
这里是一个看起来像在Entourage的图像。红色的酒吧是一个真正的名字，所以.. ya：
这里是在gmail(我知道名字没有审查)：
任何想法如何使这工作在Gmail？
解决方法
不幸的是，你不能使用position：absolute。
此外，由于Outlook使用Word HTML渲染器，您也将遇到使用绝对定位的问题。
大多数HTML电子邮件都是用表格布局的。
