Absolute positioning in gmail emails(gmail邮件中的绝对定位)
问题描述
我有一位客户想向在其网站上注册的人发送礼券.他们希望一切都设计好，所以我不能只发送文本电子邮件.我正在尝试将文本放置在图像上，以便它仍然可以是动态的.
我正在尝试使用绝对定位来做到这一点.一些电子邮件系统喜欢它.有些人讨厌它.Gmail 碰巧讨厌它.
我们将 MailChimp 用于该活动.这是电子邮件的完整来源.紧随其后的只是不起作用的代码段.
<html><头><!-- 这是一个简单的示例模板，您可以对其进行编辑以创建自己的自定义模板 --><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-家庭:格鲁吉亚；行高:150%；边距:25px 0 0 0；}.secondary-heading{字体大小:20px；字体重量:粗体；颜色:#000000；字体样式:正常；字体家族: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:下划线；字体粗细:正常；}</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-对齐:左;><tr><td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; 宽度: 500px; 位置: 相对;"><img src="aHR0cDovL2dldGZyZWVwZWxsZXRzLmNvbS9pbWFnZXMvR0NfZmxhdC5qcGc=" style="position: absolute;"><div style="position: absolute; top: 110px; left: 130px;">*|FNAME|* *|LNAME|*;<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;">*|优惠券代码|*</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-家庭:Verdana;"><p><a href="*|ARCHIVE|*" class="adminText" style="color: #800000;text-decoration: underline;font-weight: normal;">在浏览器中查看电子邮件</一个>|<a href="*|UNSUB|*" style="color: #800000;text-decoration: underline;font-weight: normal;">退订</a>*|电子邮件|* |<a href="*|UPDATE_PROFILE|*" style="color: #800000;text-decoration: underline;font-weight: normal;">更新你的个人资料</a>|<a href="*|FORWARD|*" style="color: #800000;text-decoration: underline;font-weight: normal;">转发给朋友</a></p><p>*|列表:描述|*</p><p>*|HTML:LIST_ADDRESS_HTML|*</p><p>版权 (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* 保留所有权利.</p></td></tr></表><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-对齐:中间！重要；文本对齐:左！重要；>已发送至 *|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;">退订</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;">更新配置文件</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;">转发给朋友</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;">*|奖励|*</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; 宽度: 500px; 位置: 相对;"><img src="aHR0cDovL2dldGZyZWVwZWxsZXRzLmNvbS9pbWFnZXMvR0NfZmxhdC5qcGc=" style="position: absolute;"><div style="position: absolute; top: 110px; left: 130px;">*|FNAME|* *|LNAME|*;<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;">*|优惠券代码|*</div></div></td></tr>
注意:MailChimp 合并变量是 | 之间的那些东西.和|.
这是它在 Entourage 中的外观图像.红条是真名，所以.. ya:电子邮件工作 http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
这是在 gmail 中的(我知道这个名字没有被审查):电子邮件不工作 http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
关于如何在 gmail 中使用它有什么想法吗?
很遗憾，您不能使用 position: absolute.
此外，由于 Outlook 使用 Word HTML 渲染器，因此使用绝对定位也会遇到问题.
大多数 HTML 电子邮件都使用表格进行布局.
看看这个.
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.
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.
<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="aHR0cDovL2dldGZyZWVwZWxsZXRzLmNvbS9pbWFnZXMvR0NfZmxhdC5qcGc=" 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,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="aHR0cDovL2dldGZyZWVwZWxsZXRzLmNvbS9pbWFnZXMvR0NfZmxhdC5qcGc=" 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>
Note: MailChimp merge variables are those things between | and |.
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
And here is it in gmail (I know the name isn't censored): Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
Any ideas on how to get this working in gmail?
Unfortunately, you can't use position: absolute.
Also, because Outlook is using the Word HTML renderer, you will also run into problems using absolute positioning.
Most HTML emails are laid out with tables.
Check this out.
这篇关于gmail邮件中的绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本文标题为：gmail邮件中的绝对定位
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
