HTML电子邮件在Google应用程序/Gmail中显示不正确。

Question

我的Web应用向用户发送基于HTML的电子邮件。

我创建了一个HTML电子邮件模板（基于MailChimp提供的模板，据说可以在任何浏览器/电子邮件客户端中使用）。

当我使用SendGrid发送它时，在我的苹果iPhone 4上到达并显示完美，但在Gmail / Google Apps（使用Firefox和Google Chrome）中测试时显示不正确。

无法正常工作的HTML代码片段：

<tr>
    <td align="center" valign="top" style="padding-top:0;">
        <table border="0" cellpadding="15" cellspacing="0" class="templateButton3">
            <tr>
                <td valign="middle" class="templateButtonContent">
                    <div mc:edit="std_content01">
                        <a href="http://www.url.com/blah" target="_blank">Button Text</a>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>

这里应用的CSS是：

.templateButton3{
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    /*@editable*/ background-color:#d34843;
    /*@editable*/ border:0;
    border-collapse:separate !important;
    border-radius:3px;
}

我在这里做错了什么？这是使用Google Apps/Gmail时的一个恼人副作用吗？

- James Spittal

Answer 1

所有的CSS必须内联在 td 中。以下链接可以帮助您做到这一点：http://beaker.mailchimp.com/inline-css

如果您没有使用MailChimp，而是使用他们的模板，请注意自己内联CSS。

- samanthasquared

Answer 2

只是为了支持Samantha所说的，iOS将考虑标签之间的内容.. Gmail或Google应用程序不会。

- OneEightLeft