当我在heroku使用SendGrid服务时，我注意到当我发送基于HTML的电子邮件时，CSS没有效果，有人能告诉我可能出了什么问题吗？我试图发送它作为html.haml，html.erb，但都没有工作，虽然图像在发送的电子邮件中正确查看.你知道吗？
6rqinv9w1#
尝试使用内联样式而不是外部样式表。如下所示：
<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，所以你应该主要使用图像和表格。例如，你可以编写一个很棒的电子邮件设计，然后截图。对于表格，你可以把徽标放在中间的顶部，把截图中漂亮的“特色”窗格放在左边，把“折扣”作为内容放在徽标下面的中间，等等。
xu3bshqb2#
您不能做的事情：
还有很多事情你应该知道。一个伟大的在线电子邮件服务支持什么的完整列表，看看这篇文章在Xavier Frenette。
你能做什么
简单地说，内联样式。这并不像你想象的那么糟糕，因为我们基本上是在开发一个一次性的电子邮件，内联样式并不像在网站上使用它们那样令人震惊。from this site
brtdzjyr3#
您需要使用内联样式。
4uqofj5v4#
对我来说，premailer-rails宝石的工作原理就像一个魅力。你只需要把这个宝石添加到你的宝石文件中
gem 'nokogiri' gem 'premailer-rails'
你所有的邮件都会包含assets文件夹中的样式。我通常会在assets文件夹中创建一个email.css.less，然后像这样将其包含在邮件的<head>中
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" %>
希望它能帮助到别人，问候
gdrx4gfi5#
请确保将内部样式放在head标记内例如：
<head> <style type="text/css"> ... ... </style> </head>
注意：仅内联样式和内部样式（必须在head标记中）支持。
pexxcrt26#
https://www.campaignmonitor.com/css/显示了所有css对流行邮件客户端的支持。同时，对于最流行的gmail-client，似乎不支持display:grid/flex
display:grid/flex
6条答案
按热度按时间6rqinv9w1#
尝试使用内联样式而不是外部样式表。如下所示：
而不是像这样：
（感谢Kelvis Miho指出这一点）
**编辑：**我在Google上搜索了@Joe的文本，发现大部分内容都是从http://css-tricks.com/using-css-in-html-emails-the-real-story/复制的。
**编辑：**Joe编辑了他的帖子，以包括参考链接。
请记住，大多数电子邮件客户端不支持很多CSS，所以你应该主要使用图像和表格。
例如，你可以编写一个很棒的电子邮件设计，然后截图。对于表格，你可以把徽标放在中间的顶部，把截图中漂亮的“特色”窗格放在左边，把“折扣”作为内容放在徽标下面的中间，等等。
xu3bshqb2#
您不能做的事情：
还有很多事情你应该知道。一个伟大的在线电子邮件服务支持什么的完整列表，看看这篇文章在Xavier Frenette。
你能做什么
简单地说，内联样式。这并不像你想象的那么糟糕，因为我们基本上是在开发一个一次性的电子邮件，内联样式并不像在网站上使用它们那样令人震惊。
from this site
brtdzjyr3#
您需要使用内联样式。
4uqofj5v4#
对我来说，premailer-rails宝石的工作原理就像一个魅力。你只需要把这个宝石添加到你的宝石文件中
你所有的邮件都会包含assets文件夹中的样式。我通常会在assets文件夹中创建一个
email.css.less，然后像这样将其包含在邮件的<head>中此外，当我需要包括一个图像，我发现这个助手，让我附加到电子邮件中的图像，使他们有标志和东西。
而在.erb模板中
希望它能帮助到别人，问候
gdrx4gfi5#
请确保将内部样式放在head标记内
例如：
注意：仅内联样式和内部样式（必须在head标记中）支持。
pexxcrt26#
https://www.campaignmonitor.com/css/
显示了所有css对流行邮件客户端的支持。同时，对于最流行的gmail-client，似乎不支持
display:grid/flex