关于HTML电子邮件，我最后总是回到CampaignMonitor的CSS指南。

由于他们的业务完全围绕电子邮件传递，所以他们比任何人都了解自己的业务

“胆小鬼。我将使用样式表制作一个HTML页面，然后使用jQuery将样式表应用到每个元素的样式attr。就像这样:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

然后复制DOM并在电子邮件中使用它。

Campaign Monitor有一个很好的支持矩阵，详细说明在各种邮件客户端中支持什么，不支持什么。

您可以使用Litmus这样的服务来查看电子邮件如何在多个客户端之间出现，以及它们是否被过滤器捕获等等。

邮件黑猩猩有一篇很好的文章，告诉你什么是不该做的。(我知道这听起来和你想要的完全相反)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

总的来说，你所学到的所有不好的网页设计实践似乎都是html电子邮件的唯一选择。

基本原则是:

为图像提供绝对路径(例如。 https://stackoverflow.com/random-image.png) 使用表格进行布局(从未想过 我建议这样做!) 使用内联样式(和老式css) 而且，最多2.1，盒影 不会工作，例如;))

只要在尽可能多的电子邮件客户端中进行测试，或者像上面其他人建议的那样使用Litmus !(credit to Jim)

编辑:

邮件黑猩猩做了一个伟大的工作，使这个工具可用的社区。

它应用你的CSS类到你的html元素内联为你!

我曾经打过HTML电子邮件之战。以下是我的一些关于如何在电子邮件客户端之间实现最大兼容性的设计技巧。

Inline styles are you best friend. Absolutely don't link style sheets and do not use a <style> tag (GMail, for example, strips that tag and all it's contents). Against your better judgement, use and abuse tables. <div>s just won't cut it (especially in Outlook). Don't use background images, they're spotty and will annoy you. Remember that some email clients will automatically transform typed out hyperlinks into links (if you don't anchor <a> them yourself). This can sometimes achieve negative effects (say if you're putting a style on each of the hyperlinks to appear a different color). Be careful hyperlinking an actual link with something different. For example, don't type out http://www.google.com and then link it to https://gmail.com/. Some clients will flag the message as Spam or Junk. Save your images in as few colors as possible to save on size. If possible, embed your images in your email. The email won't have to reach out to an external web server to download them and they won't appear as attachments to the email.

最后，测试，测试，测试!每个电子邮件客户端都与浏览器的工作方式不同。

除了这里发布的答案，一定要阅读这篇文章:

http://24ways.org/2009/rock-solid-html-emails

我发现图像映射工作得很好。如果你有任何页眉或页脚是图像，确保你应用了bgcolor="fill in the blank"，因为outlook在大多数情况下不会加载图像，你会留下一个透明的页眉。如果你至少指定了一种与电子邮件整体感觉一致的颜色，用户就不会感到震惊。不要尝试使用任何样式表。或者CSS !尽量避免。

如果你是从一个单词或共享的谷歌文档中复制内容，一定要(command+F)找到所有的(')和(")，并在你的编辑软件(尤其是dreemweaver)中替换它们，因为它们会显示为代码，这是不好的。

ALT是你最好的朋友。使用ALT标签添加文本到所有的图像。因为它们很可能无法正确加载。而ALT文本是什么让人们点击(见图片)按钮。同时定义你的图像宽度，高度，并使边界为0，这样你就不会在你的图像周围得到奇怪的线条。

考虑在Photoshop中编辑所有图像，每边都有15px的边框(使背景透明并保存为PNG 24)。有时电子邮件客户端不读取任何填充样式，你应用到图像，这样就避免了任何奇怪的格式!

此外，我发现链接下的行特别烦人，所以如果你应用< style="text-decoration:none;颜色:随便你想要什么颜色!”>它将删除线，给你想要的外观。

有很多东西真的会扰乱整体的外观和感觉。