样式在 Gmail 中不起作用

Posted 2023-03-15

【中文标题】样式在 Gmail 中不起作用

【英文标题】：Styles not working in Gmail

【发布时间】：2016-05-30 14:20:59

【问题描述】：

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

我有一个 id 为 OrderInfo 的 div，里面有一个 变量，它会生成一个动态表。

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 中提到过）它会生成一个表格，其中包含在发送到客户端时进行处理的值。

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

【问题讨论】：

我们可以内联编写选择器吗？

【参考方案1】：

gmail 以及其他一些 Web 和桌面/移动客户端剥离了在 head 中的 <style>...</style> 节点中导入或嵌入的 css 样式表

将它们内联：

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

作为更一般的建议：构建电子邮件 html 并非易事，因为最终结果可能会因收件人的邮件客户端而异。

一般规则是使 html 尽可能简单，避免“现代”css 功能；尽可能使用嵌套表而不是 div（有人说像构建 15 年前的网页一样构建 html）。

以上内容非常笼统，可能并不总是正确的。

有一些在线资源提供了有关如何制作 html 电子邮件或模板的建议和规则。

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

【讨论】：

我想把它交给动态（在运行时生成）表而不是 div

（更新了答案）：好的，将 css 放在 <td> 元素上 - 或任何需要样式的元素。

我想将它提供给动态（在运行时生成）表而不是 div。我不能把那个静态的。它将由一些逻辑生成，我无法控制它@Paolo

你的意思是你没有生成表格的html，对吧？

在这种情况下，您可以将 html 作为字符串并在运行时对其进行编辑，在将整个消息发送到客户端之前添加 css inline。这一点都不是微不足道的，而且超出了最初的问题。 Anywat 有一些工具可以操作存储在字符串中的 html 内容。

【参考方案2】：

2018 年更新

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

---

老答案

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>

【讨论】：

这是一个动态生成的th。我怎样才能预先设计？我怎样才能给选择器内联？ @dippas

我刚刚给你举了一个例子，说明我的答案是如何内联样式。

不，这个答案完全错误，Gmail 不支持所有样式。

你到底在哪里读到我说过它允许所有样式？

【参考方案3】：

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

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

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

【参考方案4】：

尝试使用这种样式，使您的链接变为红色，对悬停情况没有特殊效果：

a:linkcolor: red
a:visitedcolor: red
a:hovercolor: red
a:activecolor: red

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