Windows 10 邮件渐变不显示

Question

我在 Windows 10 可用的 Mail 应用程序上发现了一个问题，特别是，我在 NodeJS 开发了一个小应用程序，它发送带有 nodemail 包的电子邮件, 此电子邮件在 header 中具有以下布局：

<div id="header" style="background: linear-gradient(to right,#00c7ce,#1a5cce 85%); border-bottom: 4px solid #1a5cce;
                height: 45px; padding: 10px 15px;">
    <strong id="logo" style="color: white; font-size: 20px;
            text-shadow: 1px 1px 1px #8F8888; margin-top: 10px; display: inline-block">
        <%= process.env.COMPANY_NAME %></strong>
</div>

邮件完美显示在GMAIL:

但在 Windows 10 Mail 中不渲染渐变：

这是 Windows 10 Mail 应用程序的错误吗？因为在其他电子邮件软件中我没有问题。

Answer 1

这不是 Windows 10 邮件应用程序本身的错误。这是因为 Gmail 和 Windows 10 Mail 使用不同的 渲染引擎 。考虑 CSS 规则如何被不同的 Web 浏览器以不同方式应用。电子邮件客户端也是如此，只是 web standards set forth by W3C 经常被电子邮件客户端完全忽略，或者他们可能选择只遵守非常小的标准子集。

尝试在电子邮件客户端中使用现代 CSS 功能会产生范围广泛的影响，如果不在许多不同环境中测试生成的电子邮件，这些影响并不总是可以预测的。

您可以通过使用背景图像而不是 CSS 渐变在屏幕截图中获得所需的渐变效果，但这可能会导致其自身的一系列问题（例如特定的电子邮件客户端是否完全呈现它，文本是否正确地呈现在它上面等等）。

您可以通过以下链接了解有关此复杂问题的更多信息：

Coding for Windows 10 Mail App (emailonacid.com)
Why Clients Render Email Differently（MailChimp）

Windows 10 邮件渐变不显示

Windows 10 mail gradient not displaying

node.js

windows-10

nodemailer

windows-10-desktop