样式无法在Gmail中使用

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以及其他一些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并非易事，因为最终结果可能会有很大差异，具体取决于recipent的邮件客户端。

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

以上是非常一般的，可能并不总是如此。

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

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

Answer 2

更新2018年

Gmail现在和前一阵子一直支持嵌入式CSS，所以你可以使用里面的标签CSS <style>在head ，它甚至允许/支持使用媒体查询。

---

老答复

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

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

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

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