Question

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

我在HTML文件中创建了我的模板，我在浏览器中进行了本地测试，看起来一切都很好。

我正在使用表格进行布局
我使用的唯一其他代码是<p> <a>和<img>
现在，在<style>标记打开后，CSS位于<body>标记中，但我在使用MailChimp's 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发送电子邮件？

Answer 1

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

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

遗憾的是，您永远无法实现与总体一致性无关的任何事情 - 通常我的目标是在Gmail，Mac Mail和Outlook中看起来很好，这是您真正做到的最好的事情。 HTML电子邮件在CSS支持方面仍然落后十年，不同邮件客户端使用的HTML呈现引擎之间的极端差异意味着开发向后兼容IE6的现代网站实际上不像写一个设计严谨的电子邮件那么头疼模板。

当被问到这个问题时，我总是将人们引荐到Campaign Monitor's fantastic email client CSS compatibility chart。他们也有一个很棒的guide to coding HTML emails。

Answer 2

您遇到间距问题主要是因为您使用了段落标记。您需要将<p>标记上的边距清零。请参阅Email on Acid

撰写的这篇文章

就我个人而言，我从不使用<p>代码，因为它们不像双<br>那样一致。

Padding在表格上合理地保持一致 - 如果有人转发您的电子邮件，它可能会崩溃。如果您没有在其中放置 ，则与空表格单元格相同。我建议总是使用空单元格，除非它不是结构上重要的东西。

另外，关于声明填充的另一个注意事项，您需要单独编写顶部/底部/左/右，并且不能将它们堆叠到一个css padding:;声明中。

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

Answer 3

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

2013年的HTML电子邮件：如何控制段落和图像等元素之间的间距？

3 个答案: