HTML 电子邮件：行高 Outlook.com 忽略 .ExternalClass * {line-height: 100%}答案

【问题标题】：HTML Email: Line Height Outlook.com ignoring .ExternalClass * {line-height: 100%}HTML 电子邮件：行高 Outlook.com 忽略 .ExternalClass * {line-height: 100%}
【发布时间】：2014-03-26 22:17:29
【问题描述】：

我花了 22 小时试图纠正这个问题，因为我比较新，我想我会放弃并交给专家。

当您收到消息时，我已尝试删除由 Outlook.com 添加的额外行高。我尝试将 .ExternalClass 添加为样式，然后将其添加到正文中，但我没有任何乐趣。我可能在错误的位置添加了这个类。无论如何，如果有人可以帮我检查代码，我会喜欢它

<style>
    .ExternalClass * {line-height: 100%} 
</style>
</head>
<body class="ExternalClass" style="font-family:Arial, Helvetica, sans-serif">
<table width="900px" border="0px" align="left" cellpadding="0px" cellspacing="0px">
  <tr>
    <td>
<table width="900px" border="0px" cellspacing="0px" cellpadding="0px" style="padding-bottom: 10px">
  <tr>
  </tr>
</table>
<table width="700" border="0" cellspacing="0" cellpadding="0" style="clear:both; overflow:hidden; padding-bottom: 40px">
  <tr>
    <td width="180">
    <table width="154" height="154" border="0px" align="left" cellpadding="0" cellspacing="0" >
      <tr>
        <td bgcolor="#0099FF"><img src="http://www.internet.com/images/emails/pic.jpg" width="154px" height="154px" alt="Dan Tanner"></td>
      </tr>
    </table></td>
    <td valign="top">
    <table style="padding:0; margin:0;" width="520" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="160" style="background-color:#173966; color:#FFF; font-size:26px; line-height: 26px; font-weight:bold; padding-left:10px;">My Name</td >
        <td width="360">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15"></td>
        <td width="115" style="background-color:#ee2375; color:#FFF; font-size:18px; font-style:italic; padding-left:10px">Co-Founder</td>
        <td width="390">&nbsp;</td>
      </tr>
    </table></td>
  </tr>  
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0" style="font-size:18px">
      <tr>
        <td width="90">Email:</td>
        <td width="430">myemail@email.com</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0" style="font-size:18px">
      <tr>
        <td width="90">Phone:</td>
        <td width="430">0123456789</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0" style="font-size:18px">
      <tr>
        <td width="90">Website:</td>
        <td width="430"><a href="http://www.internet.com" target="_blank">www.internet.com</a></td>
      </tr>
    </table></td>
  </tr>
</table>
    </td>
  </tr>
</table>
</td>
  </tr>
</table>
</body>

【问题讨论】：

标签： html css outlook.com

【解决方案1】：

我已经有一段时间没有制作电子邮件模板了，但上次我做的时候，Outlook（和 Outlook.com/Hotmail）不支持style 标签。您必须在每个需要它的元素上使用 style 属性来内联样式。

您能否在浏览器中验证收到的电子邮件中是否仍存在样式标签？如果不是，那么它仍然会在显示邮件之前被删除。

我想这是有道理的，否则你可能会影响 Outlook 本身的布局，他们可能希望阻止这种情况，因为否则你可以通过发送恶意邮件来欺骗整个邮件客户端界面。

看看这个网站。它显示了哪些客户端支持哪些功能的表格：

http://www.campaignmonitor.com/css/

【讨论】：

感谢您的回复。当我在 google chrome 中运行“检查元素”时，我似乎找不到需要字体系列的打开正文样式：Arial、Helvetica、sans-serif。你能给我一个简单的例子，说明我将如何内联你提到的样式属性吗？谢谢
我认为body元素也被消除了。尝试将其改为具有style 的 div。 HTML 邮件确实比完整的 HTML 页面更受限制，每个客户端都会有不同的限制。
喜欢为所有表创建一个 div 包装器？还是每个表都有一个 div？干杯
我认为一个通用的就可以了。只需添加一个在正文开始之后开始并在正文结束之前结束的内容。我还在电子邮件中找到了对受支持功能的清晰概述：campaignmonitor.com/css（打开 PDF 或向下滚动）。
感谢 PDF 参考，看起来非常方便！

【解决方案2】：

仅使用.ExternalClass * 并不能解决问题。我建议你使用和发送电子邮件内联，有十几个从 webtools 到 ASP.NET 或 NodeJS 库。

例如。 http://premailer.dialect.ca/

【讨论】：