【问题标题】:Mailchimp buttons render badly in Gmail using incline CSSMailchimp 按钮在 Gmail 中使用内联 CSS 渲染效果不佳
【发布时间】:2020-05-01 19:25:18
【问题描述】:

我发现这个 SO 问题和答案为我解决了很多问题,让 Mailchimp HTML 模板电子邮件在 Gmail 中呈现良好:Gmail formatting on html template is getting screwed up

虽然这个答案为我解决了大部分问题,但它也引入了一个新问题:我的 HTML 按钮现在在启用内联 Mailchimp CSS 的 Gmail 中呈现得很糟糕。以前它们在禁用内联的 Gmail 中看起来很棒(尽管有很多其他的东西被破坏了)。

无论是否启用内联 CSS,它们在 Apple 邮件中都能很好地呈现。

Gmail HTML 按钮屏幕截图

Apple 邮件 HTML 按钮屏幕截图

如何使用内联 CSS 改进 Gmail 中的这些按钮?

【问题讨论】:

  • 嗨,Richard,您能提供按钮的代码和内联代码吗?尽可能安全地分享会更好。
  • 似乎无法在此帖子中附加文件?它太大,无法粘贴为代码 sn-p。我会将其通过电子邮件发送给您@Digital_Frankenstein。谢谢

标签: button gmail html-email mailchimp


【解决方案1】:

找到了问题,这很容易。

这里的这一行:

<td class="mcnButtonContent" style="font-family:Arial, &quot;helvetica neue&quot;:;, helvetica, sans-serif:;font-size:14px;padding:20px;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="middle" align="center">

具体来说:

font-family:Arial, &quot;helvetica neue&quot;:;, helvetica, sans-serif:;

您在字体声明的中间声明了分号。然后,当您声明另一个字体后备 Helvetica 时,CSS 属性会被破坏,这反过来会破坏样式的呈现输出。

当我删除这些并在 Litmus 中再次测试时,按钮按预期呈现。
我还应该指出,这也影响了 Outlook.com 和 Office 365。

基本上应该是这样的:

<td class="mcnButtonContent" style="font-family:Arial, 'helvetica neue', helvetica, sans-serif;font-size:14px;padding:20px;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="middle" align="center">

再来看看细节:

font-family:Arial, 'helvetica neue', helvetica, sans-serif;

您实际上可以使用&amp;quot; 代替实际的标点符号。这并没有造成任何问题,至少在这个小测试中是这样。

我希望这是有道理的!如果没有,请告诉我。

【讨论】:

  • 感谢您。我所有的模板代码都是 100% 由 Mailchimp 生成的,所以我不确定它为什么在字体声明中使用分号。将向 Mailchimp 报告,看看他们将来能做些什么来消除这种情况
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-09-18
  • 1970-01-01
  • 1970-01-01
  • 2019-07-06
  • 2020-10-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多