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/复制的。

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

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

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

Answer 2

你不能做什么：

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

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

你能做什么。

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

from this site

Answer 3

您需要使用内联样式。

Answer 4

对我来说，premailer-rails宝石就像一个魅力。你只需要将这些宝石添加到你的Gemfile

gem 'nokogiri'
gem 'premailer-rails'

您的所有电子邮件都会包含资源文件夹中的样式。我通常会在assets文件夹中创建一个email.css.less，然后将其包含在电子邮件的<head>中

<%= stylesheet_link_tag 'email.css' %>

而且，当我需要包含图像时，我发现这个帮助器允许我将图像附加到电子邮件中，因此它们有徽标和内容。

module EmailHelper
  def email_image_tag(image, **options)
    attachments[image] = File.read(Rails.root.join("public/#{image}"))
    image_tag attachments[image].url, **options
  end
end

在.erb模板中

<%= email_image_tag "img/logo.png", :class => "some-class" %>

希望它可以帮助别人，问候

Answer 5

确保将内部样式放在头标记

中

例如：

<head>
    <style type="text/css">
    ...
    ...
    </style>
</head>

注意：只有内联样式和内部样式（必须在head标签中）支持。

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

5 个答案: