为什么在发送HTML电子邮件时CSS不工作？ [英] Why CSS is not working when sending HTML email?

问题描述

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

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

任何想法？

解决方案

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

 < div style =color：green; ID = DIV >< / DIV> 
  

而不是像这样：

 <风格> 
 #div {
颜色：绿色; 
} 
< / style> 
 
< div id =div>< / div> 
  

（感谢Kelvis Miho指出这点）

编辑：我在Google上搜索了@ Joe的文本，并且我意识到它大部分是从 http://css-tricks.com/using-css-in-html-emails-the-real-story/ 。

编辑： Joe编辑他的帖子以包含参考链接。

不支持大量的CSS，所以你应该主要使用图像和表格。

例如，你可以编写一个美妙的电子邮件设计，然后截取它。使用表格，您可以将徽标放在中间的顶部，左侧截图的精美精选窗格，以及徽标下方中心内容的折扣等。

As I am using SendGrid service at heroku, I've noticed that when I send HTML based emails, the CSS has no effect, can any one tell me what could be wrong ?

I tried to send it as html.haml, html.erb, but both didn't work, although the images are viewed correctly in the sent emails.

Any idea ?

解决方案

Try using inline styles instead of an external stylesheet. Like this:

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

instead of something like this:

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

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

(Thanks Kelvis Miho for pointing this out)

Edit: I searched for @Joe's text on Google, and I realized that most of it was copied from http://css-tricks.com/using-css-in-html-emails-the-real-story/ .

Edit: Joe edited his post to include the reference link.

Remember that most email clients don't support a lot of CSS, so you should mostly be using both images, and tables.

You could, for example, code a wonderful email design and then screenshot it. With tables, you could put the logo on the top in the center, the screenshoted beautiful "featured" pane on the left, the "discount" as the content in the center under the logo, ect.

这篇关于为什么在发送HTML电子邮件时CSS不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！