Mailchimp Outlook 条件 CSS 未生效

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

我真的努力让它简单明了。但是上面的代码 none 发生了。知道为什么吗？

谢谢！

Answer 1

所以我还没有足够的代表来 post 发表评论（否则我会在那里问你） post 你的 HTML 也是一个例子。所以请尽可能这样做，这样我们就可以得到一个有效的代码片段。

通过在 HTML 的开始标记下方添加 CSS，我已经取得了一些成功。这是一个非常宽泛的问题，因为在没有看到它意味着 select.

的标记的情况下，不可能说出为什么你的 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，这意味着您的目标是 Outlook 2000。其他版本号允许您针对其他客户端，这意味着您可以构建适合每个 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 未生效

Mailchimp Outlook Conditional CSS not taking effect

html

css

email

outlook

mailchimp