Question

我将当前的HTML电子邮件模板自动发送给最终用户。

但收到的电子邮件似乎格式不正确..

这是我的HTML代码：

＆＃13;

<div style="background-color: #eeeeef;padding: 50px 0">
<table style="max-width: 640px" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 40px 30px 30px 30px" align="center" bgcolor="#366796">
<h1 style="color: #fff"><span style="font-family: arial, helvetica, sans-serif">You've been sent a job opportunity</h1>
</td>
</tr>
<tr>
<td style="padding: 40px 30px 40px 30px" bgcolor="#ffffff">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="260">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><span style="font-family: arial, helvetica, sans-serif">%EMAIL_YOUR_EMAIL% thought you might be interested the following role, currently being advertised on <a href="https://#/">#</a></td>
</tr>
<br>
<tr>
<td style="padding: 10px 0 0 0"><span style="font-family: arial, helvetica, sans-serif"><strong>%EMAIL_POST_TITLE%</strong> advertised by %EMAIL_POST_AUTHOR%</td>
</tr>
<br>
<tr>
<td style="padding: 10px 0 0 0"><span style="font-family: arial, helvetica, sans-serif">%EMAIL_POST_CONTENT%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center"><a href="%EMAIL_PERMALINK%"><img class="aligncenter size-thumbnail wp-image-4019" src="#" alt="APPLY NOW" width="150" height="52" /></a></p>
</td>
</tr>
<tr>
<td style="background-color: #ffffff;padding: 30px 30px 30px 30px">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="text-align:center">
<td style="font-family: Arial, sans-serif;font-size: 14px">
<p style="text-align: center">© %EMAIL_BLOG_NAME%, 2017</p>
<p style="text-align: center"><a href="#/"><img class="aligncenter wp-image-3163 size-full" src="#" alt="logo" width="160" height="34" /></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

＆＃13;

其中应包含电子邮件背后的灰色背景。但是当收件人收到电子邮件时，它不包含灰色背景.. o_O

Here is an image showing the issue I'm facing

有没有人有任何想法/可以提供帮助？ :)

Answer 1

看起来你在Outlook中检查过这个。您是否尝试过其他类似Gmail的电邮客户端？ Outlook几乎总是让电子邮件看起来与编码方式略有不同。我使用Robly进行工作，与其他所有电子邮件客户端相比，Outlook中的电子邮件总是略有不同。

Answer 2

尝试在table中添加您喜欢的背景颜色，而不是div。

从这篇文章：https://www.arclab.com/en/amlc/how-to-change-background-color-html-newsletter.html

如何更改消息的背景颜色？

找到body标记并添加/更改背景颜色：例如<body bgcolor="#FF0000">颜色代码为HEX #RRGGBB。
许多模板使用背景表，因为某些客户端正在删除正文标记。确保您也更改了背景表的颜色。

<body bgcolor="#eeeeef" leftmargin="0" marginheight="0" marginwidth="0" offset="0" topmargin="0">
<!-- background table -->
<table bgcolor="#eeeeef" id="bgtable" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr>
        <td align="center" valign="top">
            <!-- container 600px -->
            <table border="0" cellpadding="0" cellspacing="0" class="container" width="600">
                <tr>
                    <td align="left">
                        <p>Hello World!</p>
                    </td>
                </tr>
            </table>
            <!-- container 600px -->
        </td>
    </tr>
</table>
<!-- background table -->
</body>

Answer 3

我创建了一些时事通讯，我建议您使用Foundation framework to email template，这样您就可以创建代码交叉电子邮件客户端，也可以使用Litmus

在不同客户端和分辨率下测试模板

HTML电子邮件样式问题

3 个答案:

如何更改消息的背景颜色？