代码之家 › 专栏 › 技术社区 › hookedonwinter

gmail邮件中的绝对定位

css-position gmail css

hookedonwinter · 技术社区 · 14 年前

我试着用绝对定位来做这个。一些电子邮件系统喜欢它。有些人讨厌它。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,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>

我担心的只是一个片段:

<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>

|以及|

Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

这是gmail里的(我知道这个名字没有被审查过): Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

4 回复 | 直到 14 年前

alex 14 年前

不幸的是,你不能使用 position: absolute

另外,由于Outlook使用的是Word HTML呈现程序,因此在使用绝对定位时也会遇到问题。

大多数HTML电子邮件都是用表格排列的。

Check this out .

slebetman 14 年前

我建议把整个事情作为一个表来做(div支持在电子邮件客户机中不是100%可靠)。使用边框属性为表指定绿色边框。在表的第一行(合并的三列)插入徽标/横幅的图像。使用接下来的3行作为To、From和Amount(合并的第二列和第三列中的值)。并使用最后一行的最后一列作为cupon代码。

如果您真的需要双边框,那么您可以将表包装在div中,或者为了最大的兼容性,将表包装在1列1行的表中。

是的,这很难看,但是电子邮件客户端有非常多的错误和/或旧的HTML实现,所以现在不是时候也不是地方去抱怨难看的、看起来不像web2.0的代码。

更多信息请参见alex发布的链接。

Syfer Paul Morgan 4 年前

所以首先你需要设置一个容器来定位。

<div style="width:300px;height:300px;">  
</div>

然后在其中放置一个元素,将display设置为inline块,并将其放置在margin top和margin left位置。

<div style="width:300px;height:300px;">  
    <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
    </div>
</div>

元素现在的行为类似于position:relative but 我们想要position:absolute so 以免影响任何邻近元素的流动。要实现这一点,请使用max将内部元素包装到div中-height:0;最大-width:0 this 现在意味着div不占用页面上的空间,但是仍然可以看到溢出。

<div style="width:300px;height:300px;">  
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
        </div>
    </div>
</div>

现在可以将多个元素放置在该容器中并将其放置为绝对位置。在这个例子中,我添加了轮廓和半透明的背景色来清晰地显示结果。

<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;">  
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)">
            1
        </div>
    </div>
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)">
            2
        </div>
    </div>
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)">
            3
        </div>
    </div>
</div>

见解

好吧,它在桌面Outlook中仍然不起作用,但它在我测试过的其他地方几乎都能起作用。

但请明智地使用它。请考虑Outlook,也许是VML回退,或者仅仅使用Outlook条件注释。

https://web.archive.org/web/20170824110806/http://blog.gorebel.com/absolute-positioning-in-email

Beto Aveiga 10 年前

(我知道4年后我会回答。。。但也许它会帮助某人……) 如果你仔细看,你没有背景图像,你可能有10个或更多的图像,许多背景颜色和一个复杂的表格。

文本后面没有图像。您可以分割表格,将背景图像合成为多个图像片段,并将文本的背景颜色与这些图像匹配。

真正地。。。在这个模板中没有“必需的”背景图像,只有一个复杂的表。