MailChimp 可编辑按钮的内联样式被覆盖

Posted

技术标签:

【中文标题】MailChimp 可编辑按钮的内联样式被覆盖【英文标题】:MailChimp Editable buttons inline styling is overridden 【发布时间】:2015-12-15 13:04:57 【问题描述】:

我创建了一个带有可编辑区域的 MailChimp 模板。

我已经为所有内容设置了内联样式,并且我有一个可编辑的按钮:

              <!-- button -->      
              <table class="button" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-spacing: 0;font-family: Roboto,  'Times New Roman', Times, serif;border-left:1px solid #24303f;border-right:1px solid #24303f;border-bottom:1px solid #24303f;border-top:1px solid #24303f;margin:0 auto;min-width:248px;text-align:center;">
                <tr style="font-family:Georgia, 'Times New Roman', Times, serif;">
                  <td  style="border-collapse: collapse;font-family: ColdLilies-Regular, Georgia, 'Times New Roman', Times, serif;"><table class="table-inner" border="0" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 0;font-family: Roboto, Georgia, 'Times New Roman', Times, serif;">
                      <tr style="font-family:Georgia, 'Times New Roman', Times, serif;">
                        <td align="center" style="font-family:Georgia, 'Times New Roman', Times, serif;font-size:19px;color: #24303f;border-collapse: collapse;padding-left:35px;padding-right:35px;" class="variable-width-button-container">
<a href="#" style="color: #24303f;text-decoration: none;font-family: Georgia, 'Times New Roman', Times, serif;font-size:19px;font-weight:normal;padding-top:10px;padding-bottom:10px;text-transform:uppercase;text-align:center;" mc:edit="Centred Button" class="variable-button">
View&nbsp;More
</a>
</td>
                      </tr>
                    </table></td>
                </tr>
              </table>                  
              <!-- end button -->

如您所见,我使用mc:edit="Centred Button" 使按钮可编辑。我还设置了内联链接的样式。

当我使用 MailChimp 界面并编辑按钮时,编辑文本很好并保留了样式,但是一旦我更改链接 URL,它就会变成蓝色并带有下划线。

即使将编辑器切换到源代码并插入内联样式也不会解决问题。 MailChimp 没有解决方案。

【问题讨论】:

【参考方案1】:

问题是由 MailChimp 将另一个 &lt;a href=""&gt; 添加到可编辑的 &lt;a&gt; 中引起的

一种可能的解决方案是使用a * styles:herea a

更好的解决方案是将mc:edit 放在前面的&lt;td&gt; 上,而不是放在&lt;a&gt; 上以避免

&lt;a href="#"&gt;&lt;a href="#"&gt;Link Text &lt;/a&gt;&lt;/a&gt;

根据 W3C 规范,&lt;a&gt; 中不应包含 &lt;a&gt;。在 html 电子邮件中使用有效的 HTML 是一个非常好的主意,因为电子邮件客户端在最好的情况下会呈现奇怪的东西。

最初我在&lt;a&gt; 上进行了编辑以保留我的布局,但我认为这不再是最佳选择。我曾经使用以下代码:

CSS

.button a 
    styles

HTML

<table>
  <tr>
    <td class="button">
        <a>Link Text</a>
    </td>
  </tr>
</table>

更新 MailChimp 将在您发送时内联样式,并且可以在 Gmail 等上运行。

【讨论】:

这很有帮助。我现在正在编写一个 Mailchimp 模板,但我终其一生都无法弄清楚为什么我的链接样式没有坚持下去。很高兴知道 Mailchimp 将在发送时应用内联样式! 在我写这个 Q/A 之前,MailChimp 警告我说我问了太多低质量的问题。我经常找不到答案,所以我发布了一个问答。很高兴它帮助了某人 如果您认为这是正确答案,请标记为正确答案

以上是关于MailChimp 可编辑按钮的内联样式被覆盖的主要内容,如果未能解决你的问题,请参考以下文章

Mailchimp - 如何制作可编辑的链接

php类内联css样式?

Mailchimp 表单字段内联显示不起作用

表行样式被 td 样式 css 覆盖

Struts 2 jquery 可编辑网格,想要禁用内联添加按钮

MailChimp 提交按钮 CSS