样式无法在Gmail中使用

Question

我正在致力于向各种电子邮件客户端发送电子邮件(例如yahoo,hotmail,gmail,....).

我有一个id为div的div OrderInfo,我有一个生成动态表的变量.

HTML

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

动态表生成th带小写的headers(),所以我想将其更改为大写和更多样式.所以我写了一个选择器

CSS

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

这适用于雅虎,hotmail但不适用于Gmail.

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

我无法控制变量(我在div中提到)它生成一个表,其中包含在发送到客户端时处理的值.

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

Answer 1

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

把它们内联:

<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

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

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

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

Answer 3

更新2018

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

老答案

Gmail不支持嵌入式CSS，您需要使用内嵌样式，请看一下

为Gmail和Gmail移动应用开发电子邮件时必须知道的12件事

您可以执行以下操作：

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