Gmail 中的 HTML 电子邮件 - 删除了 CSS 样式属性答案

【问题标题】：HTML email in Gmail - CSS style attribute removedGmail 中的 HTML 电子邮件 - 删除了 CSS 样式属性
【发布时间】：2013-07-10 06:10:48
【问题描述】：

我正在处理 HTML 电子邮件，我将 MailChimp's Responsive Email Templates 与他们的 CSS inliner tool 结合使用。在大多数情况下，电子邮件在无数电子邮件客户端中看起来都很棒，但在 Gmail 中却被严重歪曲了。

如果我从回复箭头旁边的下拉菜单中使用 Gmail 的“显示原始内容”选项，原始 HTML 与电子邮件客户端中实际显示的内容不同。我可以通过使用开发人员工具检查元素来确认这一点。这发生在桌面和移动设备上；电子邮件客户端正在从元素中删除内联样式属性。

似乎删除样式属性的标准之一是元素是否还包含一个类。谁能证实这一点？此外，无论如何，它似乎都会从表格标签中删除所有样式属性。也有人能证实这一点吗？

有什么解决方法？

下面包含 Gmail 和 Yahoo 中的电子邮件屏幕截图。

Gmail 中的电子邮件屏幕截图，其中通过 Chrome 开发者工具显示源代码

通过 Chrome 开发者工具显示的 Yahoo 电子邮件屏幕截图

【问题讨论】：

标签： gmail html-email mailchimp

【解决方案1】：

作为在我的工作中经常为营销活动编写电子邮件的人，我能感受到你的痛苦。 Gmail 以及许多其他电子邮件客户端的代码可能有点时髦。一方面，它去除了正文之外的任何 CSS。因此，像媒体查询和文档级别样式这样的东西是行不通的。我能给你的最好的建议是手工编码你的内联 CSS 并尽量避免任何花哨的东西。事实上，如果您可以使用 HTML 属性来进行样式设置，请使用它来代替任何 CSS。一个例子是 bgcolor 而不是 background-color。

这是与我发现的您的具体问题相关的article。祝你好运。

【讨论】：

我想我会分享这个非常适合我使用的响应式模板。它适用于几乎所有电子邮件客户端，包括 Outlook 的桌面版本（Zurb 不支持）。希望它可以帮助其他人emailonacid.com/blog/details/C13/…
当我测试它时，它并不适用于所有客户端。他们遇到了表格掉落的问题，希望他们能解决。

【解决方案2】：

我刚刚检查过：如果您不在 ; 、 , 和 : 字符之间放置空格，Gmail 会删除您的内联样式属性

这很好用：

<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>

但是如果你不使用空格，同样的规则会被去掉；如果你这样写：

<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>

您将在 Gmail 客户端上获得此输出：

<span>text</span>

编辑：

除了这种行为，我注意到如果您在嵌套的<table> 或<td> 中声明font-family，Gmail 倾向于去除内联样式，我仍然不确定一般是什么其预处理器规则，我在谷歌上查过，但我找不到任何关于 Gmail 的 html 邮件组合的官方文档。

【讨论】：

我在此基础上做了一些更改，但我仍然无法相信这可以解决它。互联网是如何变得如此严重的:(
@MattLacey 这是不正确的。由于 Gmail 的条纹样式无效。
是的，@DatTT 说的。通过 HTML/CSS 验证工具运行您的电子邮件。尽管电子邮件在普通的网络浏览器中可以正常显示，但通常会出现一些 Gmail 不喜欢的语法错误。

在我的情况下，问题是“嵌套或

中的字体系列”。谢谢大佬

这里也一样，font-family 是问题，但我也必须去掉 box-shadow 才能不删除样式

【解决方案3】：

gmail 有多种解决方法。就您的样式而言，Gmail 简直是个小丑，因为它会从您的电子邮件中完全删除它不喜欢的内容。

这里有一些小技巧：

Gmail 在图像之间添加空白，或拉伸其容器的大小 td：您可以通过在图像上指定 style="display:block" 来纠正此问题（确保您的 TD 具有与图片）。

Gmail 将黑色链接呈现为蓝色链接：是的，这很难看。使用#000001 而不是#000000。

Gmail 使电话号码可点击：这可能是一件好事，也可能不是一件好事，这取决于您的客户，但解决此问题的一种方法是在电话号码周围添加一个带有样式的空锚标记。

例如：<a style="color:#000001; text-decoration:none;>555 555-5555</a>。它会让你为你的代码感到羞耻，但它是一个有效的小技巧。

【讨论】：

【解决方案4】：

只是想我会把它添加到组合中。我也遇到了这个问题，在查看原始源代码时，我意识到由于 1000 个字符的限制，8 位编码在奇怪的地方分割了行，所以我最终得到了这样的内容：

<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
 le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">

解决方案是对内容进行 base64 编码并使用块拆分或任何您必须完成的工具。

在php中我做了$html = chunk_split(base64_encode($html))然后设置Content-Transfer-Encoding: base64。现在gmail爱我了。

【讨论】：

【解决方案5】：

检查您的 CSS 是否有拼写错误

自 2011 年 OP 以来，Gmail 去除某些样式的原因可能已经改变，但这是我在 2020 年发现的...

在我的电子邮件<head> 的<style> 块中，我有一个错字，基本上是（注意“d”）：

.link {
  text-decoration: underline;d
}

检查电子邮件，我可以看到 <style> 块中的规则（以及其他所有内容）。但是，我在电子邮件中使用该类的每个地方都已被 Gmail 删除。于是<p class="link"> ... </p>神奇地变成了<p> ... </p>。

此外，在.link { ... } 下声明的所有规则也从 HTML 文档中删除。所以 - 在下面的示例中 - class="small" 可以工作，但 class="link" 和 class="headline" 将从 HTML 中删除。

<style>
  .small {
    font-size: 12px;
  }
  .link {
    text-decoration: underline;d
  }
  .headline {
    font-size: 18px;
  }
</style>

【讨论】：

Gmail 也将为内联样式执行此操作！它只会从标签中删除整个 style 属性。例如，如果你有一个流浪的!important 像这样在末尾闲逛，<a href="https://example.com" style="padding 20px; !important;">，你的链接将没有任何填充。

【解决方案6】：

使用 CSS 选择器是我能够使用的另一种解决方法。在我的示例中，我尝试格式化 HTML 表格。我发现 gmail 去掉了所有的 ID 和 CLASS 属性，使我的 CSS 无用。

经过一番调查，我注意到 gmail 没有删除我的标题属性。所以我使用标题选择器创建了一个 CSS 规则。这似乎工作正常：

[title~=myTitle] {background: black; color: white;}

我认为这不是最佳做法，但我想我会提到它。

【讨论】：

不能让它工作。我还尝试使用 Lang 属性，因为 title 属性显示了一个小工具提示。 Gmail 似乎从我的 css 中删除了[title~=myTitle] {background: black; color: white;}，但下面的代码显示了，但只是没有设置我的元素的样式。 [title~=myTitle] {background: black; color: white;}
元素的标题是什么？因为如果你完全按照我的方式使用 CSS 规则，你的元素标题应该是 title="myTitle"
我将其更改为“容器”以匹配我的标题属性。
您的 html 电子邮件中的 CSS 规则在哪里？