在电子邮件标记中使用额外的 CSS 类答案

【问题标题】：Using additional css classes in email markup在电子邮件标记中使用额外的 CSS 类
【发布时间】：2018-08-01 14:23:11
【问题描述】：

在 Outlook htm 电子邮件中，其他类被忽略。

在此示例中，当我呈现和发送以下 html 时。生成的标记如下。

最后的语句没有对齐。 Class2 RgtTx

.RgtTx {
  text-align: right !important;
}

<td class="RgtTx"></td>
<td class="RgtTx Class2"></td>
<td class="Class2 RgtTx"></td>

我不确定，但预计这不会孤立于 Outlook。

在不更改 html 的情况下使用 css 是否有解决方法或解决方法？

这不是重复的问题

我不想知道如何对齐电子邮件中的文本。
我想知道为什么其他类在电子邮件中不起作用以及如何处理。

【问题讨论】：

HTML email align text的可能重复
@thebrownkid 不，它是关于为什么 style 元素不起作用——一个完全有效的问题。
电子邮件客户端中的 CSS 支持是如此黑暗的艺术！远射，但复合选择器（例如.Class2.RgtTx）有效吗？
@HiddenHobbes 谢谢，但已经进入了不同的选择器行。我怀疑更复杂的选择器更不可能被支持。
是的，你可能是对的，感觉你在这个方面不走运。

标签： html css email outlook html-email

【解决方案1】：

通常，电子邮件需要内联样式 - 否则它会很少工作（请查看 here 以获得客户的支持）。尝试使用像 https://inliner.cm/ 这样的 CSS 内联。它需要这个：

<style>
  .RgtTx {
  text-align: right !important;
}
</style>
<td class="RgtTx"></td>
<td class="RgtTx Class2"></td>
<td class="Class2 RgtTx"></td>

并把它变成：

<style>
  .RgtTx {
  text-align: right !important;
}
</style>
<td class="RgtTx" style="text-align:right !important;" ></td>
<td class="RgtTx Class2" style="text-align:right !important;" ></td>
<td class="Class2 RgtTx" style="text-align:right !important;" ></td>

应该可以。

【讨论】：

感谢您，我知道这是首选，但我无法编辑 html。它来自预呈现的标记。
@Obsidian 哦，对不起，我不知道。不幸的是，许多常见的电子邮件客户端（包括 Gmail）不支持 style 元素。在这里查看：campaignmonitor.com/css/style-element/style-in-body
好的，谢谢。我担心根本不支持。
Gmail 支持头部样式。 campaignmonitor.com/css/style-element/style-in-head
我同意最佳做法是内联，但 95% 的电子邮件客户端现在支持媒体查询。我并不是说只做头部样式，只是指出 Gmail 支持头部样式。

【解决方案2】：

Outlook 会忽略带有!important 的标签。

Outlook 忽略 @media 查询。因此，您可以做的一件事是在查询中放置值以影响其他电子邮件客户端。

您还可以创建特定于 Outlook 的样式表来影响 Outlook 2007-2016 桌面，而不会干扰现代电子邮件客户端：

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  body {font-family: Arial, sans-serif !important; font-size: 14px;}
</style>
<![endif]-->

本文介绍了 Outlook 的其他缺点：

https://litmus.com/community/learning/8-outlook-overview

由于您不愿意使用内嵌样式，因此您将受限于对 Outlook 的影响程度。例如，如果您正在调整图像大小，Outlook 将忽略大小的 in-head 样式值并以其实际大小显示图像。

祝你好运。

【讨论】：