4

我目前正在重新设计一些 HTML 电子邮件模板，这是我几年来没有做过这么深入的事情。

我已经在一个 HTML 文件中制作了我的模板，我正在浏览器中进行本地测试，一切看起来都很好。

  • 我正在使用表格进行布局
  • 我使用的唯一其他标签是<p> <a>和<img>
  • CSS 现在位于<style>开始标签之后的<body>标签中，但我在发送之前将其转换为内联样式，使用MailChimp 的 CSS Inliner Tool。我只是把它放在一个样式标签中，以便您在这里更容易地查看 CSS。无论如何，出于测试目的，它对许多客户端都没有影响。

现在我正在从我的 PHP 应用程序发送测试电子邮件，我正试图让它们通过电子邮件客户端看起来与我的模型相同。

我注意到的主要事情是边距/填充样式似乎被忽略（例如 Outlook 2007）或额外的填充/边距添加到诸如<td>使所有内容都比我告诉它的填充方式更多的东西上（例如 Hotmail）。

示例源

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<body>

<style type="text/css">
    td {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444;}
    a {color:#056DA5;}
    p {margin:0; padding:6px 0 6px 0;}
    .tel {font-weight:bold; color:#056DA5;}
    #wrapper {padding:10px;}
    #signoff {padding:18px 0;}
    #signoff #questions {padding-bottom:18px;}
    #signature {padding-top:20px; border-top:1px solid #EEE;}
    #signature td {font-size:12px; color:#777;}
    #signature #logo {padding-bottom:12px;}
    #signature #contact p {padding:3px 0 3px 0;}
    #signature #contact a {text-decoration:none; font-size:13px; font-weight:bold; color:#C00;}
    #signature #contact .tel {padding-top:6px; color:#777;}
    #signature #social {padding:20px 0 20px 0;}
    #signature #social a {margin-right:8px;}
    #signature #address {font-size:11px; color:#999;}
</style>

<table id="wrapper" width="100%" bgcolor="#FFFFFF">
    <tr>
        <td>

            <table>

                <!-- ROW 1 -->
                <tr>
                    <td>[CONTENT]</td>
                </tr>

                <!-- ROW 2 -->
                <tr>
                    <td id="signoff">
                        <p id="questions">If you have any questions, email us at <a href="mailto:support@example.com">support@example.com</a> or call <span class="tel">01234567890</span>.</p>
                        <p>Thanks,</p>
                        <p>Company</p>
                    </td>
                </tr>

                <!-- ROW 3 -->
                <tr>
                    <td id="signature">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td id="logo" colspan="3">
                                    <img src="http://www.example.com/images/email/logo.gif" alt="Company" />
                                </td>
                            </tr>
                            <tr>
                                <td id="contact">
                                    <p><a href="http://www.example.com">www.example.com</a></p>
                                    <p><a href="mailto:support@example.com">support@example.com</a></p>
                                    <p class="tel">01234567890</p>
                                </td>
                            </tr>
                            <tr>
                                <td id="social">
                                    <a href="https://www.facebook.com/"><img src="http://www.example.com/images/email/facebook.gif" alt="Facebook" /></a>
                                    <a href="https://twitter.com/"><img src="http://www.example.com/images/email/twitter.gif" alt="Twitter" /></a>
                                </td>
                            </tr>
                            <tr>
                                <td id="address">Company, address, city, post code</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>
</body>
</html>

尝试在浏览器中查看 HTML，然后尝试作为电子邮件发送以了解我的意思。

我做错了什么，如何使电子邮件通过预期的 CSS 发送？

4

3 回答 3

12

尽可能使用内联 CSS 样式（不是<style>页面上的标签，而是style=""属性）。尽可能使用 HTML 属性（bgcolor、width、等）代替 CSS 样式，因为有更广泛和更一致的支持。height在每个元素上单独定义样式 - 不要依赖继承或级联。

我的意思是通过每个tdand等的属性或内联样式手动设置宽度、高度、填充、边距等tr。

不幸的是，您永远无法实现与完全一致的任何东西——通常我的目标是让它在 Gmail、Mac Mail 和 Outlook 中看起来不错，这是您真正能做到的最好的。HTML 电子邮件在 CSS 支持方面仍然落后了十年，而且不同邮件客户端使用的 HTML 渲染引擎之间的巨大差异意味着开发向后兼容 IE6 的现代网站实际上比写一封好的、精心设计的电子邮件更容易让人头疼模板。

当被问到这个问题时，我总是向人们推荐 Campaign Monitor 出色的电子邮件客户端 CSS 兼容性图表。他们还有一个很好的 HTML 电子邮件编码指南。

于 2013-07-26T17:18:16.870 回答
4

您遇到间距问题主要是因为您使用的是段落标签。您需要将<p>标签上的边距归零。通过电子邮件参考这篇关于酸的文章

就个人而言，我从不使用<p>标签，因为它们的一致性不如 double <br>-ing 它。

填充在表格上的工作相当一致 - 如果有人转发您的电子邮件，它可能会崩溃。如果您不将 a&nbsp;放入其中，则空表格单元格也是如此。我建议始终使用带有 nbsp 的空单元格，除非它在结构上不重要。

此外，关于声明填充的另一条注释，您需要分别编写顶部/底部/左侧/右侧，并且不能将它们堆叠到一个 csspadding:;声明中。

此外，您的颜色声明必须是 6 位十六进制，并在发送之前内联所有内容。

于 2013-07-26T18:07:28.547 回答
0

您需要对电子邮件使用超级特定的内联 CSS，因为所有邮件客户端在呈现电子邮件时都喜欢做自己的事情。我敢说，它可能比为 IE 开发更痛苦！我的意思是超级具体，不要假设任何事情！明确设置所有内容。

于 2013-07-26T17:15:43.447 回答