使用Rails Mailer Preview测试linear-gradient CSS回退时属性丢失问题

• 首先你第一段代码存在基础语法错误：background-color属性被写在了style属性的闭合引号之外，属于完全无效的属性，这就是部分Outlook客户端读不到背景色、显示空白的直接原因。
• 你调整顺序后语法修正，但background-image丢失是Rails邮件体系默认的样式清洗/内联工具导致的：绝大多数Rails邮件开发会引入premailer-rails或roadie-rails这类gem做样式内联、兼容性处理，这类工具默认会过滤掉它判定为邮件客户端兼容性差的CSS属性值，linear-gradient属于CSS3属性，旧版Outlook不支持，就会被默认规则直接从样式中删除。

1. 调整样式清洗工具的配置：如果你用的是premailer-rails，可以在初始化配置中添加规则，放行background-image的渐变属性值，不要做过滤删除。
2. 用Outlook专属条件注释做兼容回退，不需要靠属性顺序覆盖：

<a href="/" style="background-image: linear-gradient(134.72deg, #3023AE 0%, #C86DD7 100%)">
<!--[if mso]>
  <span style="background-color: #7c47c2;">
<![endif]-->
链接内容
<!--[if mso]>
  </span>
<![endif]-->
</a>

这种写法可以保证非Outlook客户端正常显示渐变，Outlook客户端走纯色回退，不会互相覆盖。
3. 如果不想调整清洗工具配置，也可以直接把渐变样式写在邮件的<head>的<style>标签里，很多工具不会清洗<head>里的自定义样式，仅会做内联处理。

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