html电子邮件签名不在gmail中显示内联css

问题描述：

因此，对于我的电子邮件签名，我使用了内联css的自定义html，正如电子邮件使用推荐的一样。html电子邮件签名不在gmail中显示内联css

这就是签名应该是什么样子，

红线只是用来支付我的个人资料。

mail signature without styling, both gmail android, gmail web

如何让Gmail与CSS正确显示我的签名？

编辑：以下是代码

<body style="color: rgb(0, 0, 0); padding: 0; padding-top: 30px; margin: 0; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;"> 

<style> 
.signature { 
    padding-top: 40px; 
    font-weight: 100; 
    word-break: all; 
} 

.vr { 
    float: left; 
    border-right: 1px solid black; 
    height: 138px; 
} 

.text-container { 
    overflow: auto; 
    font-family: sans-serif; 
    color: black; 
    padding-top: 0; 
    text-align: left; 
    padding-left: 28px; 
} 

h1 { 
    margin-left: -2.5px; 
    font-size: 34px; 
    margin-top: 0; 
    margin-bottom: -6px; 
    font-weight: 100; 
} 

.subtitle { 
    font-size: 14px; 
} 

p { 
    font-size: 18px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

a { 
    text-decoration: none; 
    color: black; 
} 

.img { 
    float: left; 
    padding-right: 10px; 
    padding-left: 10px; 
    margin: -38px; 
} 

.contact-secondary { 
    display: none; 
} 

@media only screen and (max-width: 500px) { 
    .signature { 
     padding-left: 15px; 
    } 
    .img { 
     float: none; 
     width: 150px; 
     margin-bottom: -20px; 
     margin-top: -30px; 
     padding: 0; 
    } 
    .text-container { 
     padding-left: 0; 
     margin-top: -10px; 
     border: none; 
    } 
    .vr { 
     display: none; 
    } 
} 

@media only screen and (max-width: 350px) { 
    .contact-secondary { 
     display: inherit; 
    } 
    .contact-main { 
     display: none; 
    } 
    .text-container { 
     padding-left: 0; 
     border: none; 
     margin-top: -10px; 
    } 
    .vr { 
     display: none; 
    } 
    .signature { 
     padding-left: 15px; 
    } 
    .img { 
     padding: 0; 
    } 
    .foot { 
     font-size: 12px; 
    } 
} 

@media only screen and (max-width: 250px) { 
    .img { 
     float: none; 
     width: 80px; 
     margin: -20px; 
     padding: 0; 
    } 
    h1 { 
     font-size: 23px; 
     padding-bottom: 4px; 
     padding-left: 1px; 
    } 
    .subtitle { 
     margin-top: -5px; 
     margin-left: 0px; 
     margin-bottom: -2px; 
     font-size: 10px; 
    } 
    .signature { 
     padding-left: 10px; 
     padding-top: 30px; 
    } 
    p { 
     font-size: 14px; 
    } 
    .text-container { 
     padding-left: 0; 
     border: none; 
     margin-top: 5px; 
    } 
    .contact-secondary { 
     display: inherit; 
    } 
    .contact-main { 
     display: none; 
    } 
    .vr { 
     display: none; 
    } 
    .foot { 
     font-size: 9px; 
    } 
} 

</style> 

<div class="signature"><img class="img" width="200px" src="http://harrypark.io/mail/logo.png" alt="harrypark.io logo"> 
<div class="vr"></div> 
<div class="text-container"> 
    <h1><a href="http://harrypark.io/mail/vcard.vcf">Harry Park</a></h1> 
    <p class="subtitle">Web Designer + Full Stack Developer</p> 
    <div class="contact-main"> 
     <p><a href="http://harrypark.io">harrypark.io</a></p> 
     <p><a href="mailto:MYEMAIL">MYEMAIL</a>&nbsp; |&nbsp; 
      <a href="tel:MYPHONENUM">MYPHONENUM</a></p> 
    </div> 
    <div class="contact-secondary"> 
     <p><a href="http://harrypark.io">harrypark.io</a></p> 
     <p><a href="mailto:MYEMAIL">MYEMAIL</a></p> 
     <p><a href="tel:MYPHONENUM">MYPHONENUM</a></p> 
    </div> 
    <p class="foot">web design&nbsp; |&nbsp; web development</p> 
</div> 
</div> 

</body>

对不起，我的代码尴尬格式，计算器使得它强大的硬。

所以,,你有什么问题吗？ –

对不起，完全忘了补充一点！ – harryparkdotio

可以包括你的HTML和CSS代码 –

答

Gmail不支持元素中的css，您需要使用样式属性内联css。请参阅：https://www.campaignmonitor.com/css/

这个工具可以帮助你：https://templates.mailchimp.com/resources/inline-css/

因此，然后有一个敏感的电子邮件签名，我应该包括我的基本风格内联，然后作为风格标签响应？ – harryparkdotio

完美！有效！谢谢！ – harryparkdotio

是的，这是正确的，所以'

html电子邮件签名不在gmail中显示内联css

相关推荐