我正在创建响应式电子邮件模板，我使用 Thunderbird 发送一些测试。
在大多数电子邮件客户端中，它运行良好。但是在 Gmail 中，这些样式并未应用。
检查 CSS 支持我发现 gmail 只支持 <head> 标签内的 <style> 。邮件黑猩猩
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
知道了这一点，我将我的样式植入了头部，但是，这些样式并没有应用到 GMAIL 中。
在研究了各种论坛并打破了我的头后，我找不到解决方案，所以我检查了很明显，原来Thunderbird 将 <style> 从 <head> 移动到 <body>
当我通过 Thunderbird 发送模板并查看邮件来源时，我得到以下信息：
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Thunderbird/78.7.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="body">
<p>Hi Pierce,</p>
<p class="colored"> This text is blue if the window width is below
500px and red otherwise. </p>
<p>Jerry</p>
</div>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</body>
</html>
当我通过 mailutils 发送模板时，行为符合预期，并且样式在 gmail 中正常工作
X-Mailer: mail (GNU Mailutils 3.7)
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
gmail的视图：
如何防止雷鸟将样式移动到身体？
我正在使用 Thunderbird 78.7.1、Ubuntu 20.04.2 LTS
