MailChimp 只是，总是将“颜色：继承！重要”放在链接上，在 Outlook 中将它们变成蓝色

Posted 2023-03-24

【中文标题】MailChimp 只是，总是将“颜色：继承！重要”放在链接上，在 Outlook 中将它们变成蓝色

【英文标题】：MailChimp just, always puts "color: inherit !important" on links, turning them blue in Outlook

【发布时间】：2019-10-20 17:17:44

【问题描述】：

我已经尝试了所有我能想到的方法，但无论我做什么，MailChimp 都要求任何带有 href 的 <a> 具有 color: inherit !important; text-decoration: inherit !important 并且，因为 Outlook 绝对是垃圾，这意味着我所有的链接都是蓝色的并且下划线。

在这个例子中，我可以输入一个链接，它会变成蓝色：

<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;" mc:edit="button">
    READ MORE
</td>

在这个例子中，如果我输入一个链接，它会忽略我的<a> 并在旁边添加另一个：

<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;">
    <a mc:edit="button" style="color: #27646a; text-decoration: none;">
        READ MORE
    </a>
</td>

我可以将它放在我的 CSS 中，但显然 MailChimp 决定忽略它：

td a 
    color: #27646a !important;
    text-decoration: none !important;

我真的不知道我的其他选择是什么，我发誓我不记得 MailChimp 武断地决定一切都必须在 Outlook 中看起来像垃圾 - 有什么我遗漏的吗？

【参考方案1】：

如果其他人发现了这一点，可以在 Mailchimp 模板中设置超链接颜色，Outlook 会尊重这些超链接颜色，而无需为每个链接设置内联样式。

我在 Mailchimp 中使用自定义 html 模板，使用经典构建器。

似乎确实有必要为您在模板中拥有的每种内容块指定链接样式。就我而言，我的可编辑内容块始终是 div 标签。在我的模板代码中，在 body 标记内：

<style type="text/css">
    div a
            color:#000000 !important;
            text-decoration:underline !important;
        
</style>

还需要为所有表格、p 或您用来包含文本的任何其他内容定义样式。我已经在 Outlook 365 中测试了结果，它可以工作。

我记得在某处读到 mailchimp 不允许超链接与背景颜色过于相似（因为取消订阅链接必须保持可见）所以这也是一个可能的问题。

【参考方案2】：

我使用了两种方法在 MailChimp 中生成电子邮件：1) Foundation For Emails 和 2) MailChimp 拖放电子邮件模板。

在 Foundation 中，它需要我的源 CSS 代码：

.item-link 
    color:#0C3C80;
    font-family:Helvetica;
    font-size:16px;
    text-decoration:underline;

并为“item-link”类的链接生成这样的内联样式：

<a href="*|ARCHIVE|*" style="Margin:0;color:#0c3c80;font-family:Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:underline"><span style="font-size:12px">View this email in your browser</span></a>

这会在 Outlook 中生成正确的颜色。

在拖放模板中，我使用编辑器的“设计”选项卡->“正文”->“正文链接”来分配链接颜色。它也在 Outlook 中正确显示。

不同之处可能在于，在您的两个示例中，您在 td 标记样式中分配了颜色，而在第三个示例中，您将其指定为 MailChimp 编辑器的按钮，因此按钮的样式可能会覆盖样式你想要的。

我希望这会有所帮助。

【参考方案3】：

您应该在每个 标签上明确声明颜色和文本装饰：无/下划线。然后，Mailchimp 将避免添加这些后备样式。 我一直在包装 标记的表格单元格上声明 mc:edit，因为这是编辑 url 并保持样式的万无一失的方法。

这是我使用的代码。添加了大量其他样式，这仅仅是因为我使用了构建按钮的边框技术，但问题是一样的。我在这个标签上有 mc-edit，并确保声明文本装饰和颜色，我的客户每周都使用它，没有问题。

<td align="center" valign="middle" style="padding:14px 20px;" mc:edit="button">
<a href="#" target="_blank" style="font-family:Questrial, Helvetica, Arial, sans-serif;font-size:14px;line-height:14px;font-weight:400;letter-spacing:normal;text-align:center;text-decoration:none;color:#ffffff;text-transform:uppercase;">Button</a>
</td>

试试看。希望对你有用