Question

我正在处理HTML电子邮件，我正在将MailChimp's Responsive Email Templates与CSS inliner tool结合使用。在大多数情况下，电子邮件在无数的电子邮件客户端中看起来都很棒，但在Gmail中，事情的可疑性非常低。

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

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

这有什么解决方法？

下面列出了包含Gmail和Yahoo内容的电子邮件的屏幕截图。

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

enter image description here

雅虎电子邮件的屏幕截图，其中包含通过Chrome开发者工具显示的来源

enter image description here

Answer 1

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

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

Answer 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>

修改：

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

Answer 3

gmail有多种解决方法。对于你的造型而言，Gmail是一个非常小丑，因为它会从你的电子邮件中删除它完全不喜欢的东西。

以下是一些小技巧：

Gmail会在图片之间添加空白区域，或者拉伸其容器td的大小：您可以通过在图片上指定style =“display：block”来更正此问题（确保您的TD与您的广告的宽度和/或高度相同图像）。

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

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

Ex：<a style="color:#000001; text-decoration:none;>555 555-5555</a>。它会让你对你的代码感到羞耻，但这是一个有效的小黑客。

Answer 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编码，并使用chunk split或你拥有的任何工具来完成相同的工作。

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

Answer 5

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

经过一番调查后，我发现gmail没有删除我的title属性。所以我使用标题选择器创建了一个CSS规则。这看起来很好用：

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

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

Answer 6

检查CSS是否有错字

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

在电子邮件<style>的{{1}}块中，我实际上有一个错字（请注意“ d”）：

<head>

检查电子邮件，我可以看到.link { text-decoration: underline;d }块中有规则（以及其他所有规则）。但是，Gmail剥夺了我在电子邮件中使用该课程的每个位置。因此<style>神奇地变成了<p class="link"> ... </p>。

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

class="headline"

Gmail中的HTML电子邮件 - 已移除CSS样式属性

6 个答案: