Mailchimp 按钮在 Gmail 中使用内联 CSS 渲染效果不佳

Question

我发现这个 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 中的这些按钮？

Answer 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, "helvetica neue":;, 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;

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

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