gmail邮件中的绝对定位-前端问题

Absolute positioning in gmail emails(gmail邮件中的绝对定位)

本文介绍了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邮件中的绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！