样式在Gmail中不起作用 [英] Styles not working in Gmail

问题描述

我正在将电子邮件发送到各种电子邮件客户端（例如yahoo，hotmail，gmail等）。

I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).

我的ID为 OrderInfo 的div中有一个变量一个动态表格。

I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.

HTML

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

动态表生成标题（ th ），因此我想将其更改为大写并添加更多样式。所以我写了一个选择器

The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors

CSS

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

这对yahoo，hotmail正常，但对 gmail 。

This is working fine for yahoo, hotmail but not for gmail.

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

I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.

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

I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.

所以我无法保留静态表，也无法更改其呈现方式

So I cannot keep a static table and cannot change the way it renders

推荐答案

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

gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head

将它们插入行内：

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

作为更一般的建议：构建电子邮件html并非易事，因为最终结果可能会有所不同，具体取决于

As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.

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

The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).

上面的内容非常笼统，可能不是

The above is very general and may not be always true.

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

There are several resources online that gives advices and rules on how to make an html email or template.

最后，如果要确定结果，要始终遵循的唯一唯一一条规则：与各种客户端测试邮件

Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client

这篇关于样式在Gmail中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！