【问题标题】:HTML gmail not showing background colors?HTML gmail不显示背景颜色?
【发布时间】:2015-07-21 16:30:53
【问题描述】:

我在一个 PHP 程序中嵌入了这个 CSS,用于显示表格的背景颜色。

<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eeeeee;
}
table#t01 tr:nth-child(odd) {
   background-color:#ffffff;
}
table#t01 th    {
    background-color: black;
    color: white;
}
</style>

我有这个:

<TABLE id="t01">

我获取了这个 PHP 程序的原始输出,将其保存为 .html 文件,将其上传到服务器,它的行为符合我的预期。但是当作为 HTML gmail 时,它根本不显示背景颜色。

如果我在 HTML 上添加 bgcolor="black" 就可以了。所以我知道必须可以在 html gmail 中做背景颜色,但显然我没有在这里做。

PHP 程序生成表格,我真的想让 CSS 处理行的奇数/偶数颜色。

对此有什么优雅的编程解决方案?谢谢!

【问题讨论】:

    标签: css gmail html-email


    【解决方案1】:

    Gmail 完全去除了 head 和 body 标签,只识别 style 标签中的某些元素样式。

    您需要内联样式。为了解决这个问题,我将以编程方式构建您的电子邮件,然后通过内联程序运行它。 This is a good example of one from Mailchimp.

    这应该可以解决您的问题,但您可能会遇到您希望保留在 head 标签中的任何媒体查询或类似项目的问题。每次您通过内联程序运行电子邮件时,我都会确保在所有设备上测试您的电子邮件,以确保它可以跨客户端正常工作。

    【讨论】:

    【解决方案2】:

    首先,如果文件中有 PHP,则必须将其命名为 .PHP

    其次使用内联元素,因为像 Gortonington 所说的 Gmail 和其他一些电子邮件客户端会去掉标签

    我的意思是

    <TABLE id="t01" style="width:100px; height:100px; font-size:12px;>
    

    如你所愿:

    <table style="background-color:black;border-collapse: collapse; width:100%;">
    

    等等。

    希望这会有所帮助:) -肖恩

    P.S 如果你想像普通网页一样写出所有的 CSS,那么将类放在你的元素上使用 this tool

    【讨论】:

    猜你喜欢
    • 2021-10-19
    • 2012-03-18
    • 1970-01-01
    • 2012-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-19
    • 2015-06-29
    相关资源
    最近更新 更多