为 Gmail 设置 HTML 电子邮件样式答案

【问题标题】：Styling HTML email for Gmail为 Gmail 设置 HTML 电子邮件样式
【发布时间】：2012-02-21 19:01:25
【问题描述】：

我正在生成一个使用内部样式表的 html 电子邮件，即

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

在 Gmail 中查看时，内部样式表中的所有样式似乎都被忽略了。似乎 Gmail 忽略了除内联规则之外的所有样式，例如

 <h2 style="color: red">Email content here</foo>

这是我在使用 Gmail 查看时设置 HTML 电子邮件样式的唯一选择吗？

【问题讨论】：

是的，这是唯一的，因为许多基于 Web 的电子邮件客户端不识别内部样式表。实际上，内联样式是设计 html 时事通讯的推荐方式。
据我所知，电子邮件阅读器应该支持 html 3.2 和 css 1.1。
您是如何生成电子邮件的？我的意思是你添加了创建意图的代码？
使用<html> 开头标签通常是个好习惯；)
Gmail 很烂。 iOS 应用和基于 Web 的应用！

标签： html css gmail html-email

【解决方案1】：

我在 Mailjet 中设计模板时遇到了同样的问题。问题的解决方案是在 <style> 标签内缩小 CSS 代码。

【讨论】：

【解决方案2】：

我同意所有支持类和内联样式的人的观点。您现在可能已经了解了这一点，但如果您的样式表中有一个错误，Gmail 将忽略它。

您可能认为您的 CSS 很完美，因为您经常这样做，为什么我的 CSS 会出现错误？通过 CSS Validator（例如 http://www.css-validator.org/）运行它，看看会发生什么。在遇到一些 Gmail 显示问题后，我这样做了，令我惊讶的是，几个 Microsoft Outlook 特定的样式声明显示为错误。

这对我来说很有意义，所以我将它们从样式表中删除并将它们放入 only for Microsoft 代码块中，如下所示：

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

这只是一个简单的示例，但是，谁知道呢，它可能会派上用场。

【讨论】：

谢谢，关于无效 CSS 的部分为我节省了很多时间。如果你还在，请告诉我。
嘿@ShadowWizard。我走了一段时间，但又回来了。很高兴它为您节省了一些时间。
干杯，只是想确保赏金不会被浪费。 :-)

【解决方案3】：

截至 2016 年 9 月 30 日，此处的答案已经过时。Gmail 目前是 rolling out support，用于 head 中的 style 标记以及媒体查询。如果您只关心 Gmail，那么您可以像现代开发人员一样安全地使用课程！

供参考，您可以查看official gmail CSS docs。

附带说明一下，Gmail 是唯一不支持style（reference，直到他们更新）的主要客户端。这意味着您可以几乎安全地停止将样式内联。一些比较模糊的客户可能仍然需要它们。

【讨论】：

看来还是不行。我们在 Litmus 中尝试过，但它不起作用。有什么特殊原因吗？
@ArianHosseinzadeh 什么不起作用？添加了对他们关于此事的文档的引用。
我们在 Litmus 中尝试过，它忽略了非内联样式。在他们宣布
@ArianHosseinzadeh 我在他们的文档中复制并粘贴了他们的示例，并通过putsmail 运行它。样式在 gmail 中显示。我在 Chrome 浏览器中验证了 Android gmail 应用和 gmail。我的猜测是 Litmus 预览尚未更新以反映更改。
我想知道为什么我的样式不起作用，并意识到我已将它们放在 body 标签而不是 head 标签中。

【解决方案4】：

请注意，用于发送电子邮件的服务和工具可能能够为您内联您的 CSS，从而允许 <style> 标记中的 CSS 在 Gmail 中工作。

例如，如果您使用 MailChimp 发送电子邮件，默认情况下您的 <style> 标签中的 CSS 将自动内联。使用 Mandrill，您可以通过选中“设置”选项卡的“发送默认值”部分中的“HTML 电子邮件中的内联 CSS 样式”框来启用此功能（尽管默认情况下它已禁用 for performance reasons）：

【讨论】：

【解决方案5】：

正如其他人所说，一些电子邮件程序不会读取 css 样式。如果您已经编写了网络电子邮件，则可以使用 zurb 中的以下工具来内联您的所有样式：

http://zurb.com/ink/inliner.php

当使用上面提到的来自 mailchimp、活动监视器等的模板时，这非常方便，因为正如您所发现的，它们在某些电子邮件程序中不起作用。此工具将您的样式部分留给将读取它的邮件程序，并将所有样式内联，以便以您想要的格式获得更通用的可读性。

【讨论】：

感谢您提供内联链接。

【解决方案6】：

Gmail 开始对头部区域的样式标签提供基本支持。尚未发现任何官方信息，但您可以自己轻松尝试。
它似乎忽略了类和 id 选择器，但基本的元素选择器可以工作。

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

它将在自己的头部区域创建一个样式标签，限制在包含邮件正文的 div 中

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

【讨论】：

它仍然不支持媒体查询，但有点遗憾。类和 ID 也很有用 :)
他们现在也可以进行媒体查询，并且更全面地支持 css 样式。 stackoverflow.com/questions/39759764/…

【解决方案7】：

对所有内容都使用内联样式。该站点会将您的类转换为内联样式：http://premailer.dialect.ca/

【讨论】：

这个网站很棒。显示警告并为您提供纯文本输出以及重新制作 HTML。
此 Premailer 使用 Ruby，来源：github.com/premailer/premailer。 Python 中还有一个：premailer.io 来源：github.com/peterbe/premailer，都是开源的。
这个答案不再准确。 gmail 支持样式和类，并且有关于这个主题的官方文档 - 请参阅下面 Matthew Johnson 的答案。