MailChimp可编辑按钮的内联样式被覆盖 [英] MailChimp Editable buttons inline styling is overridden

问题描述

我已经创建了具有可编辑区域的MailChimp模板.

I have created a MailChimp template with Editable Regions.

我已经对所有内容进行了内联样式设置，并且有一个可编辑按钮，如下所示:

I've styled everything inline, and I have an editable button as so:

              <!-- 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"来使按钮可编辑.我还设计了内联链接的样式.

As you can see I have used mc:edit="Centred Button" to make the button editable. I have also styled the link inline.

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

When I use the MailChimp interface and edit the button, editing text is fine and retains the style, but as soon as I change the link URL it becomes blue and underlined.

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

Even switching the editor to source code and inserting inline styles doesn't override the issue. MailChimp doesn't have a solution.

推荐答案

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

The problem is caused by MailChimp adding in another <a href=""> into an editable <a>

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

A possible solution is to use either a * {styles:here} or a a {}.

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

A better solution would be to put the mc:edit on the preceding <td> instead of on the <a> to avoid

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

根据W3C规范，<a>中不应包含<a>.在HTML电子邮件中，使用有效的HTML是一个很好的主意，因为电子邮件客户端在最佳情况下会奇怪地呈现事物.

According to the W3C specification you should not have an <a> inside an <a>. In HTML email using valid HTML is a very good idea as the email clients render things oddly at the best of times.

最初，我已将编辑内容放在<a>上以保留我的布局，但我认为这不再是最好的选择.我曾经使用以下代码:

Originally I had put the edit on the <a> to retain my layout, but I don't think that is the best option any more. I used to use the following code:

CSS

.button a {
    styles
}

HTML

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

更新 MailChimp在发送时会内嵌样式，并且可以在Gmail等上使用.

Update MailChimp will inline the style when you send it, and it will work on Gmail etc.

这篇关于MailChimp可编辑按钮的内联样式被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！