Question

我正在设计一个HTML电子邮件，并且我已经在我测试的电子邮件客户端中看起来尽可能好。我现在正在检查Outlook.com并且它有一些问题（可能是因为它们不支持边距）所以我想为该客户端添加一些条件样式。

我知道Outlook.com将电子邮件封装在.ExternalClass类中，并在ecx之前添加任何自定义类，因此我尝试了类似

的内容

* {color:black;}
.ExternalClass * {color:red;}
.ExternalClass .ecxMyClass {color:blue;}
.ExternalClass .MyClass {color:green;}

只是为了看看哪个选择器会改变文本的颜色。我不能让他们中的任何一个工作。此外，我找不到使用像Firebug这样的检查器定义样式的位置。

根据http://www.campaignmonitor.com/css/，Outlook.com应支持头部或正文中的样式标记，并且应该能够使用类作为选择器。

几乎所有的样式都是内联定义的，但我想在Outlook.com中添加填充元素，所以我不能只是内联添加它。如何在Outlook.com中定位自定义类元素？

Answer 1

CSS是Outlook的另一种球类游戏。我确信你遇到了电子邮件编码问题，但存在严重的局限性，缩小你的期望往往比尝试使某些工作更好。

以下是CSS样式适用于各种电子邮件客户端的链接 http://www.campaignmonitor.com/css/

Answer 2

我强烈建议您从电子邮件中删除边距，然后使用填充或空（nbsp）表格单元格。两者都是100％支持，并且正如您开始发现的那样，为某些客户跳过篮球可能会很快变得非常混乱。其中包含空表格单元格是最佳选择，因为如果您的订阅者将电子邮件转发给其他人，则有时可以删除填充。

话虽如此，如果您想要定位Outlook而不是其他客户端，可以使用条件mso tags。

不确定它是否适用于Outlook.com，但请尝试一下：

<!--[if gte mso 15]><!-->
 // This will only be seen by Outlook 2013
<![endif]-->

Answer 3

Outlook.com会吃条件评论，因此上述任何一种都无法正常运作。

请参阅this thread for details of an alternate approach。

Answer 4

mso标记显然不再起作用，请尝试使用此CSS hack

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
   /* This will be specific to outlook.com */
    span[class~=x_outlook] {  
      color: #26d0ae;
    }
    /* This styling will work on the mobile apps of Microsoft Outlook (both ios and android) */
    body[data-outlook-cycle] .outlook {
      color: #26d0ae;
    }
</style>
</head>

<body class="body">
  Neutral
  <span class="outlook">
    This span is a chameleon
  </span>
</body>
</html>

outlook.com如何在特定的类中定位css

4 个答案: