如何阻止Thunderbird发邮件时将HTML头部的<style>移至body内？

问题背景 #

• 开发响应式HTML邮件模板时，模板在多数邮件客户端渲染正常，但Gmail端所有内嵌样式完全不生效
• 已按照Gmail的CSS适配规则，将全部样式放置在<head>标签内的<style>块中，对照主流邮件CSS支持文档确认写法合规
• 经多轮排查定位到根源：测试环境的Thunderbird会自动把<head>内的<style>标签移动到<body>，直接触发Gmail的样式过滤机制
• 当前测试环境配置：Thunderbird 78.7.1、Ubuntu 20.04.2 LTS

核心现象对比 #

1. 原始合规模板代码 #

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

2. Thunderbird发送后的邮件源码（异常状态） #

Thunderbird自动补全了<meta>字符集标签，同时将原本在<head>内的<style>块整体移动到了<body>的最末尾：

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>

3. mailutils发送后的邮件源码（正常状态） #

mailutils不会修改HTML的DOM结构，<style>块保留在<head>内，发送后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>

阻止Thunderbird迁移<style>标签的可操作方案 #

• 调整Thunderbird发送与编辑器设置：找到编辑器、发送选项板块，关闭所有自动重写HTML、清洗DOM结构的功能，将HTML发送模式设置为原样透传源码，不自动调整页面元素位置
• 绕过Thunderbird可视化编辑器的DOM修改逻辑：新建邮件时直接通过HTML插入功能粘贴完整模板源码后发送，不要在可视化编辑界面做任何格式调整，避免编辑器触发DOM结构重排
• 升级Thunderbird版本：当前使用的78.7.1属于旧版长期支持分支，该版本存在的<head>元素自动迁移的bug已在后续稳定版本中修复
• 测试阶段可保留mailutils的发送流程，该工具不对HTML内容做二次结构修改，可稳定复现Gmail端的真实渲染效果

内容的提问来源于stack exchange，提问作者Salvador Real