CSS gmail邮件中的绝对定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3403205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute positioning in gmail emails
提问by hookedonwinter
I have a client who wants to send gift certificates to people who sign up on their site. They want it all designed out, so I can't just send a text email. I'm trying to position text over the image so that it can still be dynamic.
我有一个客户想要向在其网站上注册的人发送礼券。他们希望一切都设计出来，所以我不能只发送文本电子邮件。我正在尝试将文本放置在图像上，以便它仍然可以是动态的。
I'm trying to do this with absolute positioning. Some email systems love it. Some hate it. Gmail happens to hate it.
我试图用绝对定位来做到这一点。一些电子邮件系统喜欢它。有些人讨厌它。Gmail 碰巧讨厌它。
We're using MailChimp for the campaign. Here is the full source of the email. Following that is just the snippet that isn't working.
我们在活动中使用 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;">
0</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,Arial,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,Arial,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,Arial,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>
And just the snippet I'm worried about:
而只是我担心的片段：
<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;">
0</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|COUPONCODE|*</div>
</div>
</td></tr>
Note: MailChimp merge variables are those things between | and |.
注意：MailChimp 合并变量是在|之间的那些东西。和| .
Here is an image of what it looks like in Entourage. The red bar is a real name, so.. ya: Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
这是它在 Entourage 中的样子的图像。红色栏是真实姓名，所以.. ya： 电子邮件工作 http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
And here is it in gmail (I know the name isn't censored): Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
这是在 gmail 中（我知道这个名字没有被）： 电子邮件不起作用 http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
Any ideas on how to get this working in gmail?
关于如何在 gmail 中工作的任何想法？
回答by alex
Unfortunately, you can't use position: absolute.
不幸的是，您不能使用position: absolute.
Also, because Outlook is using the Word HTML renderer, you will also run into problems using absolute positioning.
此外，由于 Outlook 使用 Word HTML 呈现器，因此您在使用绝对定位时也会遇到问题。
Most HTML emails are laid out with tables.
大多数 HTML 电子邮件都带有表格。
看看这个。
回答by panec
This did a trick for me: http://blog.rebelmail.com/absolute-positioning-in-email/
这对我有用：http: //blog.rebelmail.com/absolute-positioning-in-email/
Please note that is not a foolproof solution. I had some problems with it on Outlook and need to disable it.
请注意，这不是万无一失的解决方案。我在 Outlook 上遇到了一些问题，需要禁用它。
回答by slebetman
I would suggest doing the whole thing as a table (div support is not 100% reliable in email clients). Use border properties to give the table the green border. Insert the image of the logo/banner in the first row of the table (merged three columns). Use the next 3 rows for the To, From and Amount (with the values in the merged second and third columns). And use the last column of the last row for the cupon code.
我建议将整个事情作为一个表格（电子邮件客户端中的 div 支持不是 100% 可靠）。使用边框属性为表格提供绿色边框。在表格的第一行（合并三列）中插入徽标/横幅的图像。将接下来的 3 行用于 To、From 和 Amount（使用合并的第二列和第三列中的值）。并使用最后一行的最后一列作为cupon 代码。
If you really want the double border then you can either wrap the table in a div or for maximum compatibility, wrap the table in a 1 column, 1 row table.
如果您真的想要双边框，那么您可以将表格包装在 div 中，或者为了最大的兼容性，将表格包装在 1 列 1 行的表格中。
Yes it's ugly but email clients have extremely buggy and/or old implementations of HTML so this is not the time or place to be squirmish about ugly, non-web2.0-looking code.
是的，它很丑，但电子邮件客户端有很多错误和/或旧的 HTML 实现，所以现在不是对丑陋的、非 web2.0 代码感到不安的时间或地点。
See the link posted by alex for more info.
有关更多信息，请参阅 alex 发布的链接。
回答by Beto Aveiga
(I know I'm answering 4 years later... but probably it will help somebody...) If you look carefully, you don't have background images, you have possibly 10 images or more, many background colors and a complex table.
（我知道我在 4 年后回答......但它可能会帮助某人......）如果你仔细看，你没有背景图片，你可能有 10 张或更多的图片，许多背景颜色和一个复杂的桌子。
There's no image behind a text. You could divide your table and compose your background image as multiple image fragments, and match the text's background color with these images.
文字背后没有图像。您可以分割您的表格并将您的背景图像合成为多个图像片段，并将文本的背景颜色与这些图像相匹配。
Really... in this template there are no "required" background images, just a complex table.
真的......在这个模板中没有“必需的”背景图像，只有一个复杂的表格。
