Question

我正致力于向各种电子邮件客户端发送电子邮件（例如yahoo，hotmail，gmail，....）。

我有一个ID为OrderInfo的div，我有一个变量，它会生成一个动态表格。

HTML

<div id="OrderInfo">
  variable 
</div>

动态表会生成带小写的标题（th），所以我想将其更改为大写和更多样式。所以我写了一个选择器

CSS

#OrderInfo table tr th {
  text-transform: uppercase;
  background-color: #737373;
  color: white;
}

这适用于雅虎，hotmail但不适用于 gmail 。

我发现只有内联样式适用于gmail，但我怎样才能修改动态样式。

我无法控制变量（我在div中提到过）它会生成一个表格，其中包含在发送给客户端时处理的值。

所以我不能保留静态表，也不能改变它呈现的方式

Answer 1

gmail 以及其他一些网络和桌面/移动客户端剥离导入或嵌入<style>...</style>

中head节点的css样式表

将它们内联：

<div id="OrderInfo">
    <table>
        <tr>
            <td style="text-transform: uppercase; background-color: #737373; color: white;">
                <!-- .......... -->
            </td>
        </tr>
    </table>
</div>

作为更一般的建议：构建电子邮件html并非易事，因为最终结果可能会有很大差异，具体取决于配方的邮件客户端。

一般规则是让 html 尽可能简单，避免使用“现代”css功能;在可能的情况下使用嵌套表而不是div（有些人认为构建html就像构建15年前的网页一样）。

以上内容非常笼统，可能并非总是如此。

网上有几种资源可以提供有关如何制作HTML电子邮件或模板的建议和规则。

最后，如果您想确定结果，请始终遵循以下规则：使用各种客户端测试您的消息

Answer 2

2018年更新

GMAIL现在和以前一直支持嵌入式CSS，因此您可以在<style>中的标记head内使用CSS，它甚至允许/支持使用媒体查询。

OLD ANSWER

~~Gmail不支持嵌入式CSS，您需要使用内联样式，看看这个~~

12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps

以下是您可以做的事情：

<击> <th bgcolor="#737373" style="text-transform: uppercase; color:white></th>

Answer 3

许多电子邮件服务不支持电子邮件模板中包含的css。而是使用内联css。

此外，应使用表格形成电子邮件模板，因为它仅支持HTML3。您可以使用带有td标记的HTML4 / 5元素

请检查this link。它将帮助您构建电子邮件模板。

Answer 4

尝试使用这种样式，使链接变红，对悬停情况没有特殊影响：

a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}

这对我来说很好，但是如果缺少4个语句中的任何一个，它在gmail客户端和Outlook中都不会起作用。它们还必须按上面显示的顺序出现。

样式无法在Gmail中使用

4 个答案:

2018年更新