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:+31612345678" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank" style="line-height: 18px; text-decoration: none; color: #333333;">+316 12 34 56 78</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>

如果您需要更多信息，请告诉我。 如果有人有任何与品牌相关的问题； 请随时通过 dm 或我的网站询问。

亲切的问候， 乔拉姆

Answer 1

JavaScript 在电子邮件客户端中不起作用。

Outlook 会忽略图像上的 padding。

float 大多不适用于 Outlook。

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

有关电子邮件的更多信息，请试试这个方便的来源：

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

祝你好运。