MailChimp 预览覆盖链接样式
Posted
技术标签:
【中文标题】MailChimp 预览覆盖链接样式【英文标题】：MailChimp preview overrides link styles 【发布时间】：2016-03-27 10:49:31 【问题描述】：我在为 MailChimp 创建自定义模板时遇到了一个问题 - 当编辑电子邮件内容中的链接时，MailChimp 会覆盖它们的样式。这是模板的一部分，
<a mc:edit="cta_link" target="_blank" href="*|CUSTOM_URL|*" style="font-family: 'Helvetica', 'Arial', sans-serif !important; font-size: 11px; color: #000000 !important; border-bottom: 1px solid #000000 !important; text-transform: uppercase !important; padding-bottom: 1px;">Read more</a>
如您所见，我还在某些样式中添加了 !important 规则，以尝试避免任何覆盖，但没有任何效果。我已经在静态示例 href src 和 MailChimp 自定义 url 变量之间切换，似乎没有任何区别。 更新链接后，字体更改为默认的 Times 字体。 我有什么遗漏吗？
【问题讨论】：
您是否有完整转储了覆盖样式的邮件黑猩猩页面？有可能邮件黑猩猩样式也附加了 !important ，此时更重要的是首先实现哪种样式。如果您使用 chrome，您可以检查元素并查看正在使用哪些样式以及正在覆盖哪些样式。 我无法复制此错误。我把它放在一个自定义模板中，它的行为符合预期。你能给自己发一封测试邮件并发布 html 内容吗？ 这里是完整的模板代码。如果你能看一下，不胜感激。 pastebin.com/cuZCmrhz 【参考方案1】：4 年后，它仍在发生。
应用到链接元素的样式会被全局链接样式覆盖。
我的解决方案：在链接中插入一个 span 标签。
<a mc:edit="cta_link" target="_blank" href="*|CUSTOM_URL|*"><span style="font-family: 'Helvetica', 'Arial', sans-serif !important; font-size: 11px; color: #000000 !important; border-bottom: 1px solid #000000 !important; text-transform: uppercase !important; padding-bottom: 1px;">Read more</a>
【讨论】：
以上是关于MailChimp 预览覆盖链接样式的主要内容，如果未能解决你的问题，请参考以下文章