9

当我在 heroku 使用 SendGrid 服务时，我注意到当我发送基于 HTML 的电子邮件时，CSS 没有效果，谁能告诉我可能出了什么问题？

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

任何的想法 ？

4

5 回答 5

13

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

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

而不是这样的：

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

（感谢 Kelvis Miho 指出这一点）

编辑：我在谷歌上搜索了@Joe 的文字，我意识到大部分是从 http://css-tricks.com/using-css-in-html-emails-the-real-story/复制的。

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

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

例如，您可以编写出色的电子邮件设计代码，然后对其进行截图。使用表格，您可以将徽标放在顶部居中，将截图精美的“特色”窗格放在左侧，将“折扣”作为徽标下方的中心内容等。

于 2012-12-29T20:28:58.270 回答
8

你不能做的事：

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

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

你可以做什么。

简而言之，内联样式。这并不像您想象的那么糟糕，因为我们基本上是在开发一次性电子邮件，内联样式并不像在网站上使用它们那样令人震惊。

从这个网站

于 2012-12-29T20:29:04.213 回答
1

您需要使用内联样式。

于 2012-12-29T20:26:45.223 回答
0

对我来说，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" %>

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

于 2016-04-17T20:10:28.990 回答
0

确保将内部样式放在 head 标签内

例如：

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

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

于 2018-03-12T10:39:48.380 回答