样式在 Gmail 中不起作用

Question

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

我有一个 id 为

OrderInfo

的 div，里面有一个 variable 可以生成动态表。

HTML

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

动态table生成小写的标题（

th

），所以我想将其更改为大写和更多样式。所以我写了一个选择器

CSS

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

这适用于 yahoo、hotmail，但不适用于 gmail。

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

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

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

Answer 1

gmail 以及其他一些 Web 和桌面/移动客户端会删除导入或嵌入到

<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，它甚至允许/支持使用媒体查询。

---

旧答案

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

为 Gmail 和 Gmail 移动应用程序开发电子邮件时必须了解的 12 件事

您可以这样做：

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

Answer 3

许多电子邮件服务不支持电子邮件模板中包含的 CSS。相反，使用内联 css。

此外，电子邮件模板应使用表格形成，因为它仅支持 HTML3。您可以使用带有

td

标签

的 HTML4/5 元素

请检查此链接。它将帮助您构建电子邮件模板。

Answer 4

Gmail 在电子邮件中呈现 CSS 样式时有一定的限制和限制。这是由于安全问题以及不同电子邮件客户端和设备之间一致的用户体验的需要。

也许尝试一些内联样式......

gmail 支持文本转换、背景颜色和颜色属性。

Answer 5

尝试使用此样式使链接变为红色，并且对于悬停情况没有特殊效果：

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

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

Answer 6

1. 使用内联 CSS - 不引用 URL。
2. CSS 必须位于 .
内