为啥 Gmail 会阻止电子邮件中的 CSS？
Posted
技术标签:
【中文标题】为啥 Gmail 会阻止电子邮件中的 CSS？【英文标题】：Why is Gmail blocking CSS in emails?为什么 Gmail 会阻止电子邮件中的 CSS？ 【发布时间】：2010-12-06 00:36:20 【问题描述】：我在电子邮件中使用了 CSS 并将其发送出去。
当我在 Gmail 中收到电子邮件时，所有 CSS 都被禁用；但是，当我在 Thunderbird 或 Outlook 中检索到电子邮件时，一切正常。
我该如何解决这个问题？
【问题讨论】：
现在不仅 Gmail，甚至 Outlook 似乎都在阻止非内联或阻止 css。他们都仍然接受内联 CSS，所以解决方法类似于<p style="background-color: #000">Hello there</p>
【参考方案1】：
Gmail 不会完全阻止 CSS。它仍然支持内联样式。为什么它不支持样式块，我不知道。要对各种 webmail 和电子邮件客户端中的 CSS 支持有一个很好的概述，这里有一个很好的。 http://www.campaignmonitor.com/css/
【讨论】：
Gmail 是否支持样式标签。请确保将<style></style> 代码放入<head> 部分。
Gmail 没有。我刚刚测试了它。它似乎也无法识别 div 标签。
从技术上讲，它确实“支持”样式标签，但它剥离了所有类和 ID 样式。它可以读取一些基本样式，但仅此而已。这类似于我说我打鲨鱼是因为我打了鲨鱼毛绒玩具。
电子邮件客户端应该全部从 html 电子邮件正文中删除远程 css、javascript 等，并且永远不要加载它。这是一种安全措施，可用于缓解 Ropemaker 风格的攻击向量。
@Ruut：谢谢队友...这很有帮助，将样式标签放在头部！！【参考方案2】：
Gmail 会阻止所有外部（引用）资产 - 样式表、图像、脚本等。这是为了保护收件人的隐私。您仍然可以包含内联样式：
<span style="color:red;">Red text</span>
【讨论】：
坦率地说，我不明白为什么完全消除 @okw 可以使用特定于用户的 URL，可以监视该 URL 以找出谁“查看”了电子邮件（通过谁访问了样式表/图像/脚本 URL）。跨度> @pst：这和 【参考方案3】：如果您可以将样式嵌入到电子邮件中的类和 id 中，它们可能会意外地与 gmail 用于显示应用程序的样式发生冲突，或者被怀有恶意的人故意冲突。内联样式是标签的本地样式，因此不理会 gmail 样式。
Google 必须保护它为人们创造的用户体验。
【讨论】：
所有/大多数其他网络邮件提供商都允许样式块。没有看到他们自己的 UI 被恶意的 CSS“黑进”。 他们只需要在 iframe 中显示邮件即可避免此类问题。这就是苹果对 iCloud 所做的事情。 或者，如果他们不喜欢 iframe，他们可以修改 CSS 并将消息放入 DIV。如果有办法，就有意愿:)。 有很多方法可以防止这种情况发生我怀疑这是这里的问题【参考方案4】：样式表是许多 HTML 功能中的一种，这些功能经常被网络邮件提供商阻止。
HTML 邮件是一个充满伤害的世界，它不会变得更好 — 事实上，您可以期待它get worse。 some 邮件程序或网络邮件服务几乎不支持 HTML 的所有功能。任何现代的东西都是致命的损失。当然还有纯文本客户端。
除非您有无尽的空闲时间来烧毁您的代码并测试每一个邮件程序，否则忘记 HTML 邮件。只需发送一封带有指向正常网页链接的文本邮件，您就可以确保一切都会按预期进行。
【讨论】：
从经验来看，像campaignmonitor.com 这样的服务可以很好地完成“丑化你的代码”的肮脏工作。【参考方案5】：另一个很好的信息来源是MailChimp EMail Template Reference。我发现开发部分特别有用，因为它包含有关 CSS GMail 支持什么以及如何利用它的信息。
【讨论】：
【参考方案6】：我刚刚对此进行了测试，它确实支持内联样式，使代码有点难看，但你可以绕过它。
希望对您有所帮助。
【讨论】：
【参考方案7】：我回答得太晚了，但这可能会对这里的人有所帮助。为了能够在 gmail 和其他电子邮件客户端中查看您的邮件，您需要为 html 中的每个标签添加内联样式，但是为每个 html 标签编写内联 css 非常耗时，为了节省您的时间，请使用内置工具
http://templates.mailchimp.com/resources/inline-css/
只需粘贴您的整个电子邮件模板，您将获得每个标签中带有内联 css 的 html 文档。就这么简单:)
注意：你可以在课堂上保持你的班级和身份。
【讨论】：
使用这个时，如果你的 CSS 包含媒体查询，请记住它们不能被内联并且可能与非媒体规则冲突。【参考方案8】：如果您使用 Ruby on Rails 和 ActionMailer，您可以使用 gem ActionMailer Inline CSS。您所要做的就是安装 gem，它会自动内联邮件模板中的所有 CSS。从字面上看，这再简单不过了。
ActionMailer Inline CSS on GitHub
【讨论】：
【参考方案9】：<style type="text/css"></style>
标签对我有用，但我确实遇到了一个问题，即我的所有 CSS 都无法正常工作，因为我错过了 ;
这是一个乏味的过程，但我最终找到了它。
link #9 from here 给了我初步提示，这可能是由于单独的 CSS 行。
【讨论】：
以上是关于为啥 Gmail 会阻止电子邮件中的 CSS？的主要内容，如果未能解决你的问题，请参考以下文章