本文介绍了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="http://getfreepellets.com/images/GC_flat.jpg" 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="http://getfreepellets.com/images/GC_flat.jpg" 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="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,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;">
$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邮件中的绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
相关推荐
1. 如果是ajax嵌套了 页面， 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
问题描述 我想改变layui时间日历布局大小，这个要怎么操作呢？ 解决办法 可以用css样式对时间日历进行重新布局，具体代码如下： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
getFullYear returns year before on first day of year(getFullYear 在一年的第一天返回前一年)...
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内，以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社...
How to use coffeescript in developing web-sites?(如何在开发网站时使用coffeescript?)...
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)