Gmail覆盖字体颜色

时间:2013-10-14 15:50:43

标签: gmail html-email

我的代码:

<tr>
     <td align="center" style="font-size:9pt; font-weight : bold;font-family:Arial; color:black;">
           SELLE ZETA CONFORT GEL
     </td>
</tr>

当我尝试不同的邮件客户端时,文本是黑色的,但是在gmail(explorer,chrome和firefox)上,这个文本是蓝色的。 我该如何解决这个问题?

如果你想看一个例子: http://issl.fr/test/test_validator.html 获取所有代码html并将其复制到那里: https://litmus.com/email-testing 您将能够在每个客户端上进行预览。看一下gmail吧。

4 个答案:

答案 0 :(得分:3)

因为您的文字位于<a>标记中(您的<a>正在将包含文字的表格包裹在其中)。这就是为什么你的文字变成了蓝色的原因。将颜色应用到<a>并且应该解决它...... John对于颜色使用正确的十六进制代码是正确的。

同样,即使您声明它应该是color:#000000,Gmail也希望将链接上的color:#000000更改为默认蓝色。使用color:#000001。这将解决它。

答案 1 :(得分:0)

在电子邮件中,您必须使用6位十六进制代码才能最大程度地兼容电子邮件客户端。使用CSS作为文本,即:color:#000000;和html的bgcolor="#FFFFFF"作为背景

答案 2 :(得分:0)

使用gmail,您需要在颜色上多余。

您不仅需要在其中声明颜色,而且还应将其包裹在颜色的范围内。

以下是您使用正确代码

的商品之一
<Track Link>
                                    <a style="text-decoration : none; color:#000000;" href="http://www.decathlon.be/selle-zeta-confort-gel-id_8052361.html">
                                        <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody>
                                            <tr><td>
                                                <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody>
                                                    <tr height="3"></tr><tr style="height : 32px !important; min-height : 32px !important; max-height : 32px !important; ">
                                                        <td width="6"></td>
                                                        <td align="left">
                                                            <div style="height :32px !important; min-height : 32px !important; max-height : 32px !important; "></div>
                                                        </td>
                                                        <td width="58"></td>
                                                        <td align="right">
                                                            <div style="height :32px !important; min-height : 32px !important; max-height : 32px !important; "><img border="0" style="display:block;" width="64" height="32" alt=" " src="http://decathlonbe.net/images/Marques/geonaute.png"></div>
                                                        </td>
                                                        <td width="6"></td>
                                                    </tr><tr height="1"></tr>
                                                </tbody></table>
                                            </td></tr>
                                            <tr><td>
                                                <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody>
                                                    <tr>
                                                        <td align="center">
                                                            <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
                                                                <tr>
                                                                    <td width="5"></td>
                                                                    <td><img width="188" border="0" alt="" src="http://www.decathlon.be/media/805/8052361/classic_400PX_asset_71685950.jpg" style="display : block;"></td>
                                                                    <td width="5"></td>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" style="font-size:9pt; font-weight : bold;font-family:Arial; color:black;"><span style="color:#000000;">SELLE ZETA CONFORT GEL</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" style="font-size:9pt; font-family:Arial; color:#6f6f6f;"></td>
                                                    </tr>
                                                </tbody></table>
                                            </td></tr><tr><td>
                                                <div class="price" style="font-family : Arial; font-size : 22pt; color : black; text-align : center;"><div class="nopromo" style="font-weight:bold;font-family : Arial; font-size : 19pt; color : black; text-align : center;">29<sup style="font-size:12pt;">&#128;95</sup></div></div>
                                            </td></tr><tr><td>
                                                <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody>
                                                    <tr>
                                                        <td width="15"></td>
                                                        <td valign="middle" align="center">
                                                            <Track Link><a style="text-decoration : none; font-family : Arial; font-weight : bold; font-size : 11pt; color : white;" href="http://www.decathlon.be/selle-zeta-confort-gel-id_8052361.html"><table align="center" cellspacing="0" cellpadding="0" border="0" style="background : #efefef;" >
                                                                    <tr height="32" style="background-color : #FF7100;">
                                                                        <td width="5" ><span style="color: #FF7100;">i<span></td>
                                                                        <td style = "max-width: 144px;"> <div style="color : white;text-align:center; font-size : 10pt;font-family:Arial;font-weight: bold; ">sefsefse </div></td>
                                                                        <td style="padding-left : 5px;">
                                                                            <span style="color : white; font-weight : bold; font-size : 12pt;">  > </span>
                                                                        </td>
                                                                        <td width="5"><span style="color: #FF7100;">i</span></td>
                                                                    </tr>
                                                                </table>
                                                            </a></Track Link>
                                                        </td>
                                                        <td width="15"></td>
                                                    </tr>
                                                    <tr height="8"></tr>
                                                </tbody></table>    
                                            </td></tr>
                                        </tbody></table>
                                </a>

答案 3 :(得分:0)

Darryl Vos的回答是正确的。

我用颜色设置链接:#00001以便始终在电子邮件中实现黑色链接。

我在一家代理公司工作,没有人抱怨它看起来不是黑色。