Gmail无缘无故地剪辑HTML电子邮件

8
我们使用node.js来格式化由SendGrid发送的HTML电子邮件,以确认账户创建或其他类似事项。邮件已成功发送。所有内容都正确显示。但是,在Gmail中,即使所有内容都正确显示,也会出现一条消息,说电子邮件被截断,并要求单击链接显示所有内容。如果单击,我们将得到相同的内容,但某些样式会丢失。另一种语言的相同电子邮件不会显示此消息。但是所有电子邮件具有相同的结构。该电子邮件的大小未超过30KB(代码+图像)。
您将在上方找到扩展代码。(内容已更改) 接下来是在ejs文件中生成的内容。
我多次阅读代码以查找任何问题(缺少标签)。 我尝试手动发送它,通知没有出现。 我计算了重量以确保它超过102KB。结果:最大30KB。 我将代码与没有此问题的其他代码进行了比较。结构上没有任何不同。只有内容不同。
<!DOCTYPE html>
<html>
    <head>
        <meta 
        http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />
        <style>
            body{
                font-family:Tahoma,Verdana,sans-serif;
                font-size:14px;
                color:#000;
                margin:0
            }
            a{
                text-decoration:none
            }
            a.link{
                color:#EB3052;
                font-weight:700
            }
            a.button{
                background-color:#EB3052;
                color:#fff;
                padding:10px;
                border-radius:5px;
                text-transform:uppercase;
                font-size:12px;
                font-weight:700;
                letter-spacing:1px
            }
            a.button.decline{
                background-color:#f5f7f7;
                color:#EB3052;
                font-weight:400
            }
            ul{
                line-height:24px
            }
        </style>
    </head>
    <body>
        <div 
        style="
            width:100%; 
            height: 100%; 
            text-align:center; 
            font-family: Tahoma, Verdana, sans-serif; 
            background-color: #F5F7F6;
        " 
        align="center"
        >
            <table 
            width="600px" 
            cellspacing="0" 
            cellpadding="0" 
            border="0" 
            align="center" 
            style="
                padding: 14px;
            "
            >
                <tr>
                    <td 
                    height="32" 
                    width="30" 
                    style="padding: 14px;"
                    >
                        <a 
                        href="url"
                        >
                            <img 
                            src="url" 
                            border="0" 
                            alt="url" 
                            style="
                                max-height: 60px
                            " 
                            />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table 
                        width="100%" 
                        style="
                            background: #fff; 
                            text-align: left; 
                            font-size:16px; 
                            padding-top: 40px; 
                            padding-bottom: 40px;
                        "
                        >
                            <tr>
                                <td 
                                style="
                                    padding-left: 32px; 
                                    padding-right: 32px;
                                "
                                >
                                    <table 
                                    width="100%" 
                                    cellspacing="0" 
                                    cellpadding="0" 
                                    border="0"
                                    >
                                        <tr>
                                            <td>
                                                <div 
                                                style="
                                                    width:100%; 
                                                    height: 100%; 
                                                    text-align:left; 
                                                    font-family: Tahoma, Verdana, sans-serif; 
                                                    line-height:18px;
                                                "
                                                >
                                                    Hi 
                                                    <br/>
                                                    <br/>
                                                    Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!
                                                    <br/>
                                                    <br/>
                                                    Here is your transaction information:
                                                    <br/>
                                                    <br/>
                                                    <strong>
                                                        Transaction information
                                                    </strong>
                                                    <br/>
                                                    Transaction number: 
                                                    <br/>
                                                    Recipient: 
                                                    <br/>
                                                    Amount: 
                                                    <br/>
                                                    Type: 
                                                    <br/>
                                                    Date: 
                                                    <br/>
                                                    Payment method: 
                                                    <br/>
                                                    <br/>
                                                    <strong>
                                                        Billing information
                                                    </strong>
                                                    <br/>
                                                    Full name: 
                                                    <br/>
                                                    Email address: 
                                                    <br/>
                                                    Postal code: 
                                                    <br/>
                                                    Country: 
                                                    <br/>
                                                    <br/>
                                                    Thank you for your generosity!
                                                    <br/>
                                                    <br/>
                                                    Sincerely,
                                                    <br/>
                                                    <br/>
                                                    Lorem
                                                    <br>
                                                    <br>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td 
                    style="
                        background: url(url), #EB3052; 
                        background-repeat-x: repeat; 
                        background-position-x: center; 
                        height: 8px;
                    "
                    >   
                    </td>
                </tr>
                <tr 
                style="
                    background-color:#EB3052; 
                    text-align: left;
                "
                >
                    <td 
                    style="
                        padding-top:14px; 
                        padding-bottom:14px; 
                        padding-left: 32px; 
                        padding-right: 32px; 
                        color:#fff; 
                        font-size: 12px;
                    "
                    >
                        <strong>
                            Lorem ipsum dolor sit amet.
                        </strong>
                        <br/>
                        <strong>
                            Lorem ipsum dolor sit amet.
                        </strong>
                    </td>
                </tr>
                <tr>
                    <td 
                    style="
                        text-align:center; 
                        height:24px; 
                        font-size: 13px; 
                        color:#B1B1B1; 
                        padding-top:14px; 
                        padding-bottom:14px; 
                        padding-left: 32px; 
                        padding-right: 32px;
                    "
                    >
                        Lorem ipsum dolor sit amet.
                        <span 
                        style="
                            color:#FFFFFF;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </span>
                         Lorem ipsum dolor sit amet.
                        <br/>
                        <br/>
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </a>
                         | 
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </a>
                         | 
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        ">
                            Lorem ipsum dolor sit amet.
                        </a>
                        <br/>
                        <br/>
                        <a 
                        href="url"
                        >
                            <img 
                            src="url" 
                            border="0" 
                            alt="url" 
                            style="
                                max-height: 64px
                            "
                            />
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

Hi <%- body.firstName %>!<br/><br/>
Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!<br/><br/>
Here is your transaction information:<br/><br/>
<strong>Transaction information</strong><br/>
Transaction number: <%- body.transactionNumber %><br/>
Recipient: <%- body.recipient %><br/>
Amount: $<%- body.amount %> <%- body.currency %><br/>
Type: <%- body.type %><br/>
Date: <%- body.date %><br/>
Payment method: <%- body.payment %><br/><br/>
<strong>Billing information</strong><br/>
<% if (body.organizationName) { %>
Company name: <%- body.organizationName %><br/>
<% } %>
Full name: <%- body.firstName %> <%- body.lastName %><br/>
Email address: <%- body.email %><br/>
Postal code: <%- body.postalCode %><br/>
Country: <%- body.country %><br/><br/>
Thank you for your generosity!<br/><br/>
Sincerely,<br/><br/>
<%- sender.name %>

电子邮件已经正确完整地显示出来,但是在邮件末尾却显示了被截断的通知(但实际上没有截断)。

在这种情况下,不应该出现通知。

如何防止Gmail在电子邮件已经正确完整地显示时,在邮件末尾显示通知?

1个回答

6

我的情况是由电子邮件中的一个非ASCII字符引起的(具体来说是ä)-在消息任何部分添加它都会被剪辑在gmail中。

我确定我正在使用utf-8对电子邮件进行编码,也许sendgrid稍后以某种方式重新编码它。


2
+1 同意 @Ridim 的说法。我们还发现,如果您使用相应的 HTML 实体(例如 é 或 ë)替换字符,则 Gmail 会很高兴。对于 .Net 开发人员,HttpUtility.HtmlEncode 可以解决问题。 - Jedidja
2
如果能帮到有需要的人——我也遇到了“剪切问题”,同时在将包含北欧字符(æ、ø、å)的变量添加到使用{{ someVariable }}的动态模板中。通过结合@Jedidja提到的HttpUtility.HtmlEncode并在动态模板中使用{{{ someVariable }}},剪切问题消失了,而且这些字符(æ、ø、å)也被正确地显示出来。 - Stig Stavik
2
只是想提一下:我在页脚使用了©字符,这导致了问题。 - marcellsimon
1
我正在使用SendGrid的可视化设计工具,在一个文本模块中我输入了©,但是SendGrid将HTML实体转换为©字符,导致了问题。我不得不将文本模块转换为代码模块,这样SendGrid就不会再进行转换了。 - Gavin
由于版权字符的原因,我也遇到了同样的问题。将其更改为HTML实体后,问题得到解决。 - Alek Davis
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接