为什么CSS在发送HTML电子邮件时不起作用？

Question

当我在heroku使用SendGrid服务时,我注意到当我发送基于HTML的电子邮件时,CSS没有效果,任何人都可以告诉我什么可能是错的？

我试图将它作为html.haml,html.erb发送,但两者都不起作用,尽管在发送的电子邮件中正确查看了图像.

任何的想法？

Answer 1

尝试使用内联样式而不是外部样式表.像这样:

<div style="color:green;" id="div"></div>

而不是像这样的东西:

<style>
#div{
color:green;
}
</style>

<div id="div"></div>

(感谢Kelvis Miho指出这一点)

编辑:我在Google上搜索@ Joe的文字,我意识到其中大部分是从http://css-tricks.com/using-css-in-html-emails-the-real-story/复制的 .

编辑:乔编辑了他的帖子以包含参考链接.

请记住,大多数电子邮件客户端不支持很多CSS,因此您应该主要使用图像和表格.

例如,您可以编写精彩的电子邮件设计,然后将其截屏.使用桌子,您可以将徽标放在中间的顶部,左侧是截图漂亮的"特色"窗格,"折扣"作为徽标下方中心的内容等.

Answer 2

你不能做什么:

包括带样式的部分.Apple Mail.app支持它,但Gmail和Hotmail不支持,因此它是禁止的.Hotmail将支持正文中的样式部分,但Gmail仍然不支持.
链接到外部样式表.没有多少电子邮件客户端支持这一点,最好忘记它.
背景图像/背景位置.Gmail也是这个问题的罪魁祸首.
清除你的花车.再次使用Gmail.
余量.是的,严重的是,Hotmail忽略了利润.基本上任何CSS定位都不起作用.
字体-什么.机会是Eudora会忽略你试图用字体声明的任何东西.

你还应该注意更多的事情.有关在线电子邮件服务支持的完整列表,请查看Xavier Frenette上的这篇文章.

你可以做什么.

用两个词来说,内联样式.它并不像你想象的那么糟糕,因为我们基本上开发的是一次性电子邮件,内联样式并不像在网站上使用它们那样令人震惊.