HTML电子邮件在Google Apps / Gmail中无法正确显示 [英] HTML email doesn't display correctly in Google Apps/Gmail

问题描述

我的网络应用程序向用户发送基于HTML的电子邮件。

My web application sends HTML-based e-mail to users.

我创建了一个HTML电子邮件模板（基于MailChimp提供的模板

I've created a HTML e-mail template (based off a template provided by MailChimp which is supposedly designed to work in any browser/email client).

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

When I send it using SendGrid, it arrives and displays perfectly on my Apple iPhone 4 but doesn't display correctly when I test it in Gmail/Google Apps (using both Firefox and Google Chrome).

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

The HTML code snippet that isn't working properly:

<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的恼人副作用吗？

What am I doing wrong here? Is this an annoying side effect of using Google Apps/Gmail?

推荐答案

所有CSS必须内联在 td 。这将为您执行此操作： http://beaker.mailchimp.com/inline-css

All CSS must be inline on the td. This will do it for you: http://beaker.mailchimp.com/inline-css

MailChimp会自动执行此操作，如果您不使用MC，而是使用其模板，则必须自己内联CSS。

MailChimp automatically does this, if you are not using MC but making use of their template, you must inline the CSS yourself.

这篇关于HTML电子邮件在Google Apps / Gmail中无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！