Question

通过Mailchimp编码电子邮件模板，尽管我已将其用于每个基于HTML的电子邮件客户端。 Outlook的基于Microsoft Word的电子邮件客户端遇到了一些麻烦。我遵循了Mailchimp's documentation，但是对于实际发生的代码没有运气。我们正在尝试定位所有Outlook邮件客户端，而我目前正在Outlook 365上进行测试，这也有问题。

这是我们代码的一些示例，它放在正文的末尾。

<!--[if gte mso 9]>
<style type="text/css">
  .orange-block {margin: 0px !important;}
  .orange-block {width: 600px !important;}
  .orange-block {padding: 20px !important;}

  .orange-image {margin-left: 30px !important;}

  .templateImage {width: 600px !important;}
  .templateImage {margin: 0px !important;}
  .socialicon {height: 23px !important;}
  .socialicon {width: 23px !important;}
  .socialicon {margin: 10px !important;}
</style>
<![endif]-->

我真的试图使其简单明了。但是上面的代码都没有发生。知道为什么吗？

谢谢！

Answer 1

因此，我没有足够的代表来发表评论（否则我会在那儿向您询问）来发表您的HTML示例。因此，请尽可能这样做，以便我们获得有效的代码段。

通过在HTML的开始标记下方添加CSS，我已经取得了一些成功。但是，这是一个非常广泛的问题，因为无法知道为什么CSS不会在没有看到要选择的标记的情况下在特定的邮件客户端中呈现。

话虽如此，我建议您尝试一下

<!--[if mso]>
<style type="text/css">
.class-name {
  color: red!important;
}
</style>
<![endif]-->

将其粘贴到开始的标记下方，然后将.class-name更改为标记中的值。

我花了很多时间学习如何在Windows上迎合Outlook邮件客户端，如果您也可以提供HTML，我们将很乐意为您提供帮助。

上述代码段中的9也无法在365中使用：

从Mailchimp文档中查看：https://templates.mailchimp.com/development/css/outlook-conditional-css/

Outlook版本号使用Microsoft Office版本号可以定位特定的Outlook客户端。在上面的示例中，“ mso 9”是Office 2000，这意味着您要定位Outlook2000。其他版本号允许您定位其他客户端，这意味着您可以构建针对每个Outlook版本的样式表。

Outlook 2000-版本9 Outlook 2002-版本10 Outlook 2003-版本11 Outlook 2007-版本12 Outlook 2010-版本14 Outlook 2013-版本15

Answer 2

<!--[if gte mso 9]>
<style type="text/css">
  .orange-block {margin: 0px !important;}
  .orange-block {width: 600px !important;}
  .orange-block {padding: 20px !important;}
  .orange-image {margin-left: 30px !important;}
  .templateImage {width: 600px !important;}
  .templateImage {margin: 0px !important;}
  .socialicon {height: 23px !important;}
  .socialicon {width: 23px !important;}
  .socialicon {margin: 10px !important;}
</style>
<![endif]-->

Outlook 2007-2019忽略图像宽度，高度，边距的类。将值直接应用于图像：

<img src="" width="600" height="23" class="templateImage" />

您可以使用类名来更改现代电子邮件客户端中的图像。

Outlook忽略margin:。尝试使用Margin:。

Outlook 2013-2019对padding的支持不一。您可以直接向<td style="padding: 20px;">应用填充，但是Outlook将忽略图像和其他实例上的填充。

祝你好运。

Mailchimp Outlook条件CSS无效

2 个答案: