MailChimp 可编辑按钮内联样式被覆盖
MailChimp Editable buttons inline styling is overridden
我创建了一个带有可编辑区域的 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 More
</a>
</td>
</tr>
</table></td>
</tr>
</table>
<!-- end button -->
如您所见,我已使用 mc:edit="Centred Button"
使按钮可编辑。我还设置了内联 link 的样式。
当我使用 MailChimp 界面并编辑按钮时,编辑文本很好并且保留了样式,但是一旦我更改 link URL 它就会变成蓝色并带有下划线。
即使将编辑器切换到源代码并插入内联样式也不能解决这个问题。 MailChimp 没有解决方案。
问题是由于 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 等。
我创建了一个带有可编辑区域的 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 More
</a>
</td>
</tr>
</table></td>
</tr>
</table>
<!-- end button -->
如您所见,我已使用 mc:edit="Centred Button"
使按钮可编辑。我还设置了内联 link 的样式。
当我使用 MailChimp 界面并编辑按钮时,编辑文本很好并且保留了样式,但是一旦我更改 link URL 它就会变成蓝色并带有下划线。
即使将编辑器切换到源代码并插入内联样式也不能解决这个问题。 MailChimp 没有解决方案。
问题是由于 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 等。