1

我正在设计一个 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 中定位我的自定义类元素？

4

4 回答 4

1

CSS is a different ball game for Outlook. As I'm sure you've come across in coding for email, there are severe limitations and it's often better to scale back your expectations than try and make something work.

Here is a link to what CSS styles will work for various email clients http://www.campaignmonitor.com/css/

于 2013-07-12T21:27:43.250 回答
1

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

话虽如此，如果您想针对 Outlook 而不是其他客户端，则可以使用条件mso 标签。

不确定它是否适用于 Outlook.com，但试试这个：

<!--[if gte mso 15]><!-->
 // This will only be seen by Outlook 2013
<![endif]-->
于 2013-07-15T13:41:28.227 回答
0

Outlook.com 会吃有条件的评论，所以以上都不能正常工作。

有关替代方法的详细信息，请参阅此线程。

于 2014-03-26T17:33:24.923 回答
0

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>

于 2019-11-07T10:06:31.033 回答