代码之家 › 专栏 › 技术社区 › Charlie McShane

Mailchimp Outlook条件CSS未生效

mailchimp outlook email css html

Charlie McShane · 技术社区 · 6 年前

通过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]-->

我真的试着让它简单&直截了当的但是上面的代码都没有发生。知道为什么吗?

2 回复 | 直到 6 年前

Dennis Ferreira 6 年前

通过在HTML的开始标记下面添加CSS,我在这方面取得了一些成功。这是一个非常广泛的问题,因为如果没有看到CSS要选择的标记,就无法说明为什么CSS不会在特定的邮件客户端中呈现。

话虽如此,我还是建议你试试这个

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

将其粘贴到开口下方<车身>标记并将.class名称更改为标记中的值。

此外,上述代码段中的9在365中也不起作用:

请参见Mailchimp文档: https://templates.mailchimp.com/development/css/outlook-conditional-css/

使用Microsoft Office版本号可使您以特定Outlook客户端为目标。在上面的示例中,mso 9是Office2000,这意味着您的目标是Outlook 2000。其他版本号允许您以其他客户端为目标,这意味着您可以根据每个Outlook版本构建定制的样式表。

Outlook 2000-第9版 Outlook 2002-第10版 Outlook 2007-第12版 Outlook 2010-第14版 Outlook 2013-第15版

gwally 6 年前

<!--[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: 相反

padding . 您可以将填充应用于 <td style="padding: 20px;"> 直接,但Outlook将忽略图像和其他实例上的填充。