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

Question

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

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

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

有什么办法解决这个问题？

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

---

Gmail中的电子邮件屏幕截图,其中的源代码通过Chrome开发人员工

---

Yahoo中的电子邮件屏幕截图,其中的源代码通过Chrome开发人员工

Answer 1

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

这是一篇与我找到的具体问题相关的文章.祝你好运.

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>

编辑:

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

Answer 3

Gmail 有多种解决方法。Gmail 在设计风格方面简直就是一个笑话，因为它会从你的电子邮件中彻底剔除它不喜欢的内容。

这里有一些小技巧：

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

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

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

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