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

我正在处理一封HTML电子邮件，并与他们的电子邮件结合使用。在大多数情况下，电子邮件在无数的电子邮件客户端中看起来都很棒，但在Gmail中，事情被严重歪曲了

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

删除样式属性的标准之一似乎是元素是否还包含类。有人能证实这一点吗？此外，它似乎会从表标记中删除所有样式属性。有人能证实这一点吗

有什么解决办法

下面是Gmail和Yahoo的电子邮件截图

---

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

---

通过Chrome开发者工具显示源代码的雅虎电子邮件截图

---

作为一个在我的工作中经常为营销活动编写电子邮件的人，我感受到了你的痛苦。Gmail和其他许多电子邮件客户机一样，在编写代码时可能有点怪。首先，它去掉了身体外部的CSS。因此，输入诸如媒体查询和文档级样式之类的内容是行不通的。我能给你的最好建议就是手工编写内联CSS，尽量避免任何花哨的东西。事实上，如果您可以使用HTML属性来进行样式设置，那么可以使用它来代替任何CSS。一个例子是背景色而不是背景色

---

这是一个与我发现的你的具体问题有关的问题。祝你好运

gmail有多种解决方案。当谈到你的风格时，Gmail简直是个笑话，因为它会把你不喜欢的东西从你的电子邮件中完全去掉

以下是一些小提示：

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

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

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

---

例如：

使用CSS选择器是我能够使用的另一种变通方法。在我的示例中，我试图格式化一个HTML表。我发现gmail去掉了所有的ID和类属性，使得我的CSS毫无用处

经过一些调查，我注意到gmail并没有删除我的标题属性。因此，我使用标题选择器创建了一个CSS规则。这似乎很管用：

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

我不认为这是最佳实践，但我想我会提到它。
我只是想把它加入到混合中。我也遇到了这个问题，当查看原始源代码时，我意识到由于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">

7343409795

解决方案是对内容进行base64编码，并使用chunk split或任何您必须完成相同任务的工具

在php中，我进行了
$html=chunk\u分割（base64\u encode（$html））
，然后设置
内容传输编码：base64
。现在gmail爱我了。
我刚刚检查过：
如果你不在
之间加空格，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倾向于去掉内联样式，如果在嵌套的
或
中声明
字体系列，我仍然不确定其预处理器的一般规则是什么，我在谷歌上查过了，但是我找不到任何关于Gmail html邮件合成的官方文档。
检查你的CSS是否有打字错误。

Gmail剥离某些风格的原因可能自2011年的OP以来有所改变，但以下是我在2020年发现的

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

.link{
文本装饰：下划线；d
}

查看电子邮件，我可以看到该规则（以及其他所有内容）位于
块中。然而，我在邮件中用过的每一个地方都被Gmail删掉了。所以
 
神奇地变成了
 

此外，在
.link{…}
下声明的所有规则也从HTML文档中剥离。因此-在下面的示例中-
class=“small”
可以工作，但是
class=“link”
和
class=“headline”
将从HTML中剥离


.小{
字体大小：12px；
}
.链接{
文本装饰：下划线；d
}
.标题{
字号：18px；
}
我想我会与大家分享这个非常适合我使用的响应模板。它适用于几乎所有的电子邮件客户端，包括桌面版的Outlook（Zurb不支持）。希望它能帮助其他人，当我测试它时，它并不是在所有客户上都有效。他们有一个桌子掉下来的问题，希望他们能解决。不能让这个工作。我还尝试了Lang属性，因为title属性会显示一些工具提示。Gmail似乎将
[title~=myTitle]{背景：黑色；颜色：白色；}
从