样式在 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;
}

这适用于 yahoo, hotmail 但不适用于 gmail 。

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

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

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

原文由 Dheeraj Patnaik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

将它们内联：

 <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 电子邮件或模板的建议和规则。

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

原文由 Paolo 发布，翻译遵循 CC BY-SA 3.0 许可协议