电子邮件模板位置绝对?

问题描述 投票:0回答:5

在电子邮件模板中使用

position:absolute
安全吗?

html-email
5个回答
16
投票

取决于您的用户使用的邮件客户端。例如,Outlook 处理位置:绝对好,而 Thunderbird 则不然。

我会尝试将您的邮件模板设计得尽可能“正常”。例如,表格很有帮助(恶心)。

请参阅以下页面,了解 HTML 邮件的样式提示,包括一些绝对位置建议:


12
投票

添加一个老问题,我知道 - 但我可以确认 GMail 目前都不支持position:absolute。


8
投票

在电子邮件发送器中使用绝对位置不是一种安全的方式,因为所有电子邮件服务器都不支持该标签..相反,你们可以使用绝对位置

<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
  <tbody>
    <tr>
            <td align="left" valign="top">
              <p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
              <p Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
            </td>
          </tr>
        </tbody>
      </table>

即使你们也可以通过在另一个 td 中添加此代码来使用可点击的按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width" >
    <title></title>
</head>
<body style="Margin:0px; Padding:0px;">
    <table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td align="center" valign="top">
                    <table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
                        <tbody>
                            <tr>
                                <td align="center" valign="top">
                                    <table width="100%" align="center" style="Margin:0px auto; Padding:0px; border-collapse:n-left: 20px; max-width:600px; " border="0" cellspacing="0" cellpadding="0" >
                                        <tbody>
                                            <tr>
                                                <td align="left" valign="top">
                                                    <p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
                                                    <p  Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table width="100%" align="left" style="Margin:0px auto; Padding:0px; border-collapse:collapse;  max-width:600px; Margin-left: 20px;  Margin-top:15px;" border="0" cellspacing="0" cellpadding="0" >
                                        <tbody>
                                            <tr>
                                                <td align="left" valign="top">
                                                    <a href="https://www.google.co.in/" style="padding: 10px 35px; text-decoration: none; color: #ffffff; background-color:#000000; letter-spacing: 0.55px; text-align:left; line-height: 24px; font-family:'Open Sans',arial,sans-serif!important;">Reset Your Password</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    
                    
                </td>
            </tr>
        </tbody>
    </table>


3
投票

根据电子邮件中的样式

AOL
(版本9之前)和
Mozilla Mail
/
ThunderBird
(所有版本)都不支持电子邮件正文中的绝对定位。


0
投票

CSS 中的绝对不适用于 HTML 电子邮件。 如果你要使用绝对的图像组合,你可以使用这样的风格。

 background-image: url(url_to_your_image);

希望对您有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.