Gmail不允许邮件中的样式表

时间:2014-03-08 05:02:59

标签: css css3 gmail

我想用css样式表设置我的电子邮件模板设计

每个电子邮件地址都支持此功能,但Gmail不支持样式效果

这是我的代码。

<style>
p
{
 margin-top:0px;
 margin-bottom:0px;
 line-height:20px;
}
.top
{
 margin-top:15px;
}
#top
{
 margin-top:25px;
}
.leftpadding
{
padding-left:25px;
}
#leftpadding
{
padding-left:45px;
}
</style>

<table width="50%">
<tr>
    <td valign="middle">

                    <img src="home1.png">   
    </td>
    <td valign="middle">    
        <span style="font-size:30px;float:right;">(Portal Name)</span>

    </td>
</tr>       
<tr>
    <td colspan=2 style="font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#000; line-height:10px; border-top:2px #0d5497 solid   ">         
        <p>Dear Admin,</p>

        <p class="top leftpadding">A new ticket has been created which needs your attention. </p> 

        <p class="top leftpadding">Ticket details are given below - </p>
        <p class="top" id="leftpadding">Subject: $tickets.getSubject()</p>
        <p id="leftpadding">Category: $categories.getCatagoriesName()</p>
                    <p id="leftpadding"> Status: $status </p>
        <p id="leftpadding">Priority: $priority.getPriority_name()  </p>

        <p class="top leftpadding">You can check the status of or reply to this ticket online at:</p>
        <p class="leftpadding"><a href="$customizationSettings.getBrandDomain()/helpdesk/customersupport/viewTicket.html?ticketId=$tickets.getTicket_id()">View Ticket </a></p>         

        <p id=top>Thank You,</p>        
        <p>Support Team,</p>
        <p>$customizationSettings.getTitle()</p>
        <a href=$customizationSettings.getWebsiteUrl() target="_blank" style="text-decoration:none;">
            <span style="font-family:Myriad Pro; color:#0d5497; font-size:16px;">$customizationSettings.getWebsiteUrl()</span>
        </a>            
    <td>
</tr>   
</table>

有一种方法可以做这个内联样式表,但这是非常困难的,凝灰岩工作可以让任何人给我正确的方法吗?

3 个答案:

答案 0 :(得分:1)

不幸的是,Gmail(以及大多数其他电子邮件客户端)不支持嵌入式css或样式标记。因此,您必须为每个元素使用内联样式。 你可以像

那样做
<p style="margin-top:0px; margin-bottom:0px; line-height:20px;">
    your content
    </p>

答案 1 :(得分:1)

是的,这是唯一一种方法,因为许多基于Web的电子邮件客户端无法识别内部样式表。实际上,内联样式是设计html简报的推荐方法。

为所有内容使用内联样式。此站点会将您的类转换为内联样式:http://premailer.dialect.ca/

enter image description here

答案 2 :(得分:1)

你必须给css特别是Tag 请参阅代码

<span style="">
    <p style=""> This is test......</p>
</span>