34

我正在处理 HTML 电子邮件，我正在使用MailChimp 的响应式电子邮件模板和他们的CSS 内联工具。在大多数情况下，电子邮件在无数电子邮件客户端中看起来都很棒，但在 Gmail 中，事情却被严重歪曲了。

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

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

有什么解决方法？

以下是 Gmail 和 Yahoo 中来源的电子邮件截图。

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

在此处输入图像描述

雅虎电子邮件截图，来源通过 Chrome 开发者工具显示

在此处输入图像描述

4

6 回答 6

28

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

这是一篇与我发现的具体问题相关的文章。祝你好运。

于 2013-07-12T02:56:13.290 回答
25

我现在刚刚检查过：如果您不在;,,和:chars之间放置空格，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>

编辑：

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

于 2016-06-26T17:36:45.193 回答
5

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

这里有一些小技巧：

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

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

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

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

于 2013-07-31T18:24:12.083 回答
3

只是想我会把这个加入到组合中。我也遇到了这个问题，在查看原始源代码时，我意识到由于 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爱我。

于 2015-11-30T08:43:08.057 回答
2

检查你的 CSS 是否有错别字

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

在我的电子邮件的一个<style>块中<head>，我有一个错字，基本上是（注意“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>
于 2020-08-21T17:53:20.820 回答
1

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

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

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

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

于 2013-12-19T16:28:21.527 回答