HTML电子邮件签名问题

Question

开发人员和爱好者！

由于我对HTML有一点经验，所以我认为尝试创建html电子邮件签名会很有趣，而且确实如此！直到我在Litmus上检查结果。如此多的微小缺陷我无法弄清楚该如何解决：

•个人信息会部分或完全显示在PC上的Outlook徽标下方，而不是徽标旁边。

•仅在发送之前，在Apple邮件中不可见的社交媒体图标。

•纠正浏览器，iPad邮件和iPhone邮件中社交媒体图标之间的空间，但PC上的Outlook中（或在此处运行代码时）不正确。

这些兼容性问题是否无法解决？如果他们可以，我需要您的帮助！

[This is how the signature is supposed to look（徽标是动画）。

这是代码：

<table border="0" cellpadding="0" cellspacing="0" width="800">
  <tbody>
    <tr>
      <td border="0" cellpadding="0" cellspacing="0">
      
      	<p style="line-height: 11px; padding: 0px; font-family: Helvetica; font-size: 12px;">
      
      <a href="http://www.joramipsum.com" target="_blank" ><img src="https://joramipsum.com/wp-content/uploads/2019/11/email_animatie-7.gif" width=116 border="0" style="float: left; padding: 0 15px 0 0;" alt="IPSUM logo" title="click for portfolio, testimonials and free consult!"> </a>
        
      <a style="font-style: bold; color: #333333;"><strong>Joram Esveld</strong></a><br>
       
        <a style="line-height: 18px; color: #017d85">branding specialist</a>
        <br><br>
      
        <a href="https://www.joramipsum.com/" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank"
        style="text-decoration: none; color:#333333;" >www.joramipsum.com</a><br>
        
        <a href="tel:[phone]" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank" style="line-height: 18px; text-decoration: none; color: #333333;">[phone]</a><br><br>
     
      	<a href="https://www.facebook.com/joramipsum" target="_blank" ><img src="https://joramipsum.com/wp-content/uploads/2019/12/facebook.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="Facebook" title="Facebook"> </a>
        
        <a href="https://www.instagram.com/joramipsum" target="_blank" ><img src="https://joramipsum.com/wp-content/uploads/2019/12/instagram.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="Instagram" title="Instagram"> </a>
        
        <a href="https://www.twitter.com/joramipsum" target="_blank" ><img src="https://joramipsum.com/wp-content/uploads/2019/12/twitter.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="Twitter" title="Twitter"> </a>
        
        <a href="https://www.linkedin.com/company/joramipsum" target="_blank" ><img src="https://joramipsum.com/wp-content/uploads/2019/12/linkedin.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="LinkedIn" title="LinkedIn"> </a>
    	</p>
      </td>
    </tr>
  </tbody>
</table>

让我知道是否需要更多信息。如果有人有任何与品牌相关的问题；随时询问thrue dm或我的网站。

亲切的问候，Joram

Answer 1

[JavaScript将无法在电子邮件客户端中使用。

Outlook忽略图像上的padding。

float通常不适用于Outlook。

更好的方法是使用td将签名分成两个单独的列。

有关使用电子邮件的详细信息，请尝试以下便捷来源：

https://www.campaignmonitor.com/css/

祝你好运。>>