HTML电子邮件签名CSS在某些电子邮件客户端中不起作用[重复]答案

【问题标题】：HTML Email Signature CSS Not Working in Some Email Clients [duplicate]HTML电子邮件签名CSS在某些电子邮件客户端中不起作用[重复]
【发布时间】：2019-01-25 03:56:23
【问题描述】：

我正在尝试使用表格创建基于 html 的电子邮件签名。

它肯定在 html 中工作，当我复制并粘贴到 gmail 时工作，但是当我复制到 Outlook 时，CSS 中断。我在这里做错了吗？

<table style="width: 500px; font-size: 12pt; font-family: Arial,sans-serif; line-height:normal;" cellpadding="0" cellspacing="0">
<tbody>
 <tr> 
  <td style="width:86px; vertical-align:middle;" valign="middle">
   <a href="#" target="_blank"><img border="0" alt="Logo" height="auto" width="148" style="width:148px; height:auto; border:0;" src="https://i.imgur.com/1HlZfl8.png"></a>
   
  </td>
  

  <td style="width:45px; text-align:center; vertical-align:middle;" valign="middle">
   <div style="margin-left:15px"><img src="https://i.imgur.com/mNNR1Ga.png"></div>
  </td>
  <td style="width:500px; vertical-align:middle;" valign="middle">
   <table cellpadding="0" cellspacing="0" width="100%">
   <tbody>
    <tr>
     <td style="font-size:12pt; font-family: Arial, sans-serif; color: #3d3c3f; padding-bottom:3px;"><span style="font-weight: bold; font-family: Arial, sans-serif; color:#3c3c3b;">Jessica Smith</span>
      <span style="font-size:9pt; font-family: Arial, sans-serif; color:#3c3c3b;"> | CEO/Founder</span></td>
    </tr>
    <tr>
     <td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">t </div>(07) 3281 0000</span><span style="font-family: Arial, sans-serif; color:#3c3c3b"></span><span style="font-family: Arial, sans-serif; color:#3c3c3b; margin-left:10px;"><div style="font-weight:bold; display: inline-block; width: 15px;">f</div>(07) 3281 0000</span>
     </td>
    </tr>       
    <tr>
     <td width="20px" style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b; "><div style="font-weight:bold; display: inline-block; width: 15px;">e </div><a href="#" style="color: #006f71;">info@domainnamehere.com.au</a></span>
     </td>
    </tr>       
    <tr>
     <td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">w </div><a href="#" style="color: #006f71;">domainnamehere.com.au</a></span>
     </td>
    </tr>       
    
   </tbody>
   </table>
  </td>
 </tr>
 <tr>
  <td style="width:500px; padding-top:16px;" colspan="3" width="500">
   <a href="#" target="_blank" rel="noopener"><img border="0" alt="Banner" width="500" style="width:500px; height:auto; border:0;" src="https://i.imgur.com/NBxWjRC.png"></a>
  </td>
 </tr>  
</tbody>
</table>

Gmail Screenshot
Outlook Screenshot

不知道发生了什么。

【问题讨论】：

是的，Outlook 在电子邮件中的样式可能有点像皮塔饼。我建议使用pre-built framework like foundation 来帮助避免花费时间进行故障排除
stackoverflow.com/questions/54168230/…

标签： html css email

【解决方案1】：

电子邮件客户端不严格遵循 HTML 标准。典型电子邮件客户端的查看技术不如 Web 浏览器最新。你需要小心。在您的浏览器中运行的 HTML 代码可能不适用于电子邮件客户端。

您可能想阅读Mailchimps Article 并访问this link 以获取CSS Support

【讨论】：