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>

對不起，我的代碼尷尬格式，計算器使得它強大的硬。

來源

2016-09-22 harryparkdotio

所以,,你有什麼問題嗎？ –

對不起，完全忘了補充一點！ – harryparkdotio

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