【发布时间】：2012-12-14 16:05:21
【问题描述】：
当我在 heroku 使用 SendGrid 服务时，我注意到当我发送基于 HTML 的电子邮件时，CSS 不起作用，谁能告诉我可能出了什么问题？
我尝试将其作为 html.haml、html.erb 发送，但两者都不起作用，尽管在发送的电子邮件中可以正确查看图像。
有什么想法吗？
【问题讨论】：
标签： css ruby-on-rails-3 heroku html-email sendgrid
【发布时间】：2012-12-14 16:05:21
【问题描述】：
尝试使用内联样式而不是外部样式表。 像这样：
<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，因此您应该主要同时使用图像和表格。
例如，您可以编写出色的电子邮件设计代码，然后对其进行截图。使用表格，您可以将徽标放在顶部居中，将截图精美的“特色”窗格放在左侧，将“折扣”作为徽标下方的中心内容等。
【讨论】：
-
谢谢阿呆的解释。
-
@SamirSabri 谢谢它的帮助！ :)
-
@SamirSabri 如果您还有其他问题，请告诉我。 :)
-
@simo Gmail 仅支持内联样式，因此最好为 html 电子邮件内联所有 css。另外，避免使用 div 来支持表格。
你不能做什么：
- 包括一个带有样式的部分。 Apple Mail.app 支持它，但 Gmail 和 Hotmail 不支持，所以这是一个禁忌。 Hotmail 将支持正文中的样式部分，但 Gmail 仍然不支持。
- 链接到外部样式表。没有多少电子邮件客户端支持这一点，最好忘记它。
- 背景图像/背景位置。 Gmail 也是这个问题的罪魁祸首。
- 清除您的浮动。再次使用 Gmail。
- 边距。是的，说真的，Hotmail 忽略了利润。基本上任何 CSS 定位都不起作用。
- 字体-任何东西。 Eudora 可能会忽略您尝试使用字体声明的任何内容。
还有很多事情是您应该注意的。有关哪些在线电子邮件服务支持哪些内容的完整列表，请查看 Xavier Frenette 上的这篇文章。
你能做什么。
简而言之，内联样式。这并不像您想象的那么糟糕，因为我们基本上是在开发一次性电子邮件，内联样式并不像在网站上使用它们那样令人震惊。
【讨论】：
-
这就是为什么它是“不能做”列表的一部分。
-
还将 display:block 添加到 img 标签。
-
我会用表格做布局。
-
@Joe 背景图片确实有效，但在元素中无效（始终如一）。如果您在正文标签（对于 Outlook）和 100% 的表格（对于 Gmail 等）中设置它，您可以获得一个适用于所有主要电子邮件客户端的整体电子邮件背景图像。
-
使用 backgrounds.cm 作为背景图片（完整的电子邮件或 td）适用于 99% 的电子邮件客户端（包括所有 Outlook）。
您需要使用内联样式。
【讨论】：
-
我使用了campaignmonitor.com/templates 来生成电子邮件模板，我以为他们会关心内联样式，但看来我必须自己修复它，你知道吗？将 CSS 转换为内联样式的便捷工具？
-
1+，谢谢，奇怪的是谷歌在 HTML 电子邮件中根本不支持 CSS ..
-
它支持，但内联。
-
Campaign Monitor 有一个工具，可以在通过他们的服务发送之前自动内联 CSS。这就是为什么他们总是把它留在
对我来说，premailer-rails gem 就像一个魅力。您只需将这些宝石添加到您的 Gemfile 中
gem 'nokogiri'
gem 'premailer-rails'
您的所有电子邮件都将包含资产文件夹中的样式。我通常在资产文件夹中创建一个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" %>
希望对某人有所帮助，问候
【讨论】：
确保将内部样式放入 head 标签内
例如：
<head>
<style type="text/css">
...
...
</style>
</head>
注意：仅支持内联样式和内部样式（必须在head标签中）。
【讨论】：