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

Question

我创建了一个带有可编辑区域的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 height="40" 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没有解决方案。

Answer 1

问题是由MailChimp将另一个<a href="">添加到可编辑的<a>中引起的

一种可能的解决方案是使用a * {styles:here}或a a {}。

一个更好的解决方案是将mc:edit放在前面的<td>而不是<a>上以避免

<a href="#"><a href="#">Link Text </a></a>

根据W3C规范，你不应该在<a>里面有一个<a>。在HTML电子邮件中使用有效的HTML是一个非常好的主意，因为电子邮件客户端在最好的时候会使事情变得奇怪。

最初我把编辑放在<a>上以保留我的布局，但我不认为这是最好的选择。我曾经使用以下代码：

CSS

.button a {
    styles
}

HTML

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

更新MailChimp会在发送时内联样式，它将在Gmail等上运行。