我已经创建了电子邮件签名。当我在浏览器中打开签名时,签名看起来很好,但是,每当我尝试在Gmail中使用签名时,签名就会显得不合比例。 gmail似乎忽略了某些CSS。 这是它在我的收件箱中的样子:
https://codepen.io/Madses/pen/BeRbXa
代码如下:
<div id="handtekening" style="width:650px;">
<span style="padding-bottom:30px;">Met vriendelijke groeten,</span>
<table style="width:650px; font-family:Open Sans, sans-serif; border-spacing: 0px; margin-top:40px;">
<thead>
<tr style="background-color:#d22a2a; font-size:12px; padding:0px;">
<td style="width:26px; height:149px; border-width: 0px; padding: 5px;"></td>
<td style="width:155px; height:149px;"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/mick-profiel.png" style="margin-top:-40px;"></td>
<td style="width:239px; height:149px; padding:28px 14px; color:#ffffff;">
<span style="font-weight:900;">Mick Brookman</span><br>
Media Designer<br>
mick@e-marketingsupport.nl<br>
Groeneweg 23, 3981 CK Bunnik<br>
+31 088 339 76 78<br></td>
<td style="width:230px; height:149px;"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/Logos2019.gif"></td>
</tr>
</thead>
</table>
<table style="width:630px; margin-top:-15px; border-spacing: 0px;">
<thead>
<tr>
<td style="width:487px"></td>
<td style="width:32px;"><a href="https://www.facebook.com/Duitsemarkt/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/facebook.png"></a></td>
<td style="width:10px;"></td>
<td style="width:32px;"><a href="https://www.instagram.com/dexportmarketeers/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/instagram.png"></a></td>
<td style="width:10px;"></td>
<td style="width:32px;"><a href="https://www.linkedin.com/company/803846/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/linkedin.png"></a></td>
<td style="width:10px;"></td>
<td style="width:32px;"><a href="https://twitter.com/duitsemarkt"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/twitter.png"></a></td>
<td style="width:5px;"></td>
</thead>
</table>
<table style="width:630px; margin-top:15px; border-spacing: 0px; margin-left:10px;">
<thead style="margin:0 auto; font-family:Open Sans, sans-serif;">
<tr style="background-color:#fff; box-shadow: 0px 0px 10px -2px rgba(148,148,148,0.5);">
<td style="width:172px height:82px; text-align:center; font-size:12px; font-weight:600; color:#d22a2a;">Wij zijn trots op onze<br>Awards en Partners</td>
<td style="width:115px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/google-premier-badge.jpg"></td>
<td style="width:115px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/fd-gazalle-2018.jpg"></td>
<td style="width:90px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/award.jpg"></td>
<td style="width:138px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/amazon.jpg"></td>
</thead>
<tbody style="width:650px; font-family:Open Sans, sans-serif;">
<tr>
<td colspan=9 style="color:#b2b2b2; font-size:12px; text-align:center; padding-top:12px;"><a href="https://www.e-marketingsupport.nl" style="color:#b2b2b2;">e-marketingsupport.nl</a> | <a href="https://www.dexport.nl" style="color:#b2b2b2;">dexport.nl</a> | <a href="https://www.verkopen-op-amazon.nl" style="color:#b2b2b2;"> verkopen-op-amazon.nl</a> | <a href="https://www.profitwiser.com" style="color:#b2b2b2;">profitwiser.nl</a> | <a href="https://www.crossborderevent.nl" style="color:#b2b2b2;">crossborder.nl</a></td>
</tr>
</tbody>
</table>
</div>