时间戳

首页 > 解决方案 > Mailchimp 按钮在 Gmail 中使用倾斜 CSS 渲染效果不佳

button - Mailchimp 按钮在 Gmail 中使用倾斜 CSS 渲染效果不佳

问题描述

我发现这个 SO question and answer 为我解决了很多问题，让 Mailchimp HTML 模板电子邮件在 Gmail 中呈现良好：HTML 模板上的 Gmail 格式被搞砸了

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

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

Gmail HTML 按钮屏幕截图

Apple Mail HTML 按钮截图

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

标签： buttongmailhtml-emailmailchimp

解决方案

发现了问题，这很容易。

这一行在这里：

<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;

你实际上可以用来&quot;代替实际的标点符号。这并没有引起任何问题，至少在这个小测试中是这样。

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

推荐阅读