邮件转发时<style>标签丢失，如何保留HTML邮件的CSS样式？

这个问题太常见了——大部分邮件客户端（包括Gmail、Outlook这类主流平台）在转发邮件时，都会自动清理<head>标签里的<style>块，这就是你看到样式丢失的核心原因。要解决这个问题，核心思路是让CSS样式脱离容易被清理的<head>区域，下面是几个经过验证的靠谱方案：

1. 优先使用内联CSS样式 #

这是最稳妥的方案，把样式直接写在HTML元素的style属性里，比如：

<p style="font-family: Arial, sans-serif; color: #2c3e50; line-height: 1.6;">
  这是一段带内联样式的文本
</p>

样式和元素绑定在一起后，转发时几乎不会被邮件客户端移除。如果手动写内联样式太繁琐，可以用邮件开发工具自动把<style>里的样式批量内联到对应元素上——很多邮件模板编辑器都自带这个功能，不用额外找外部工具。

2. 尝试在<body>内放置<style>块 #

部分邮件客户端（比如Outlook桌面版）允许在<body>标签内部保留<style>块，你可以把原来的样式移到<body>最顶部：

<body>
  <style type="text/css">
    .content { color: #3498db; font-size: 14px; }
  </style>
  <div class="content">这是测试内容</div>
</body>

不过要注意，这个方法不是所有客户端都支持（比如Gmail还是可能会过滤），只能作为内联方案的补充。

3. 针对特定客户端的条件样式 #

如果你的邮件需要兼容Outlook这类“特殊”客户端，可以用微软的条件注释把样式包裹起来，转发时这类注释有时候会被保留：

<!--[if mso]>
<style type="text/css">
  .outlook-only { font-size: 16px; }
</style>
<![endif]-->

但同样，这个方法只针对特定场景，不能替代内联样式的通用性。

总结一下：内联CSS是唯一能保证在绝大多数邮件客户端转发时都保留样式的方案，其他方法都是辅助补充。如果要做专业的营销邮件或者需要稳定样式的邮件，一定要优先用内联样式。

内容的提问来源于stack exchange，提问作者Oleksandr Yarushevskyi