HTML 电子邮件 : Line Height Outlook. com 忽略 .ExternalClass * {line-height: 100%}

标签 html css outlook.com

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

我已尝试删除 outlook.com 在您收到消息时添加的额外行高。我尝试将 .ExternalClass 添加为样式,然后将其添加到正文中,但我并不高兴。我可能在错误的位置添加了类(class)。不管怎样,如果有人能帮我检查代码,我会很高兴

<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>

最佳答案

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

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

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

看看这个网站。它显示了一个表格,其中列出了哪些客户端支持哪些功能:

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

关于HTML 电子邮件 : Line Height Outlook. com 忽略 .ExternalClass * {line-height: 100%},我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22674215/

相关文章:

javascript - jQuery 隐藏、更改内容、显示

html - html标签的边框和背景

HTML 电子邮件 - 如何删除 : 1em; -webkit-margin-after: 1em; which is automatically added to <p> in outlook. com(hotmail)之前的 -webkit-margin-?

android - 如何在 Android 4.2.2 上使用 Exchange ActiveSync 从 Outlook.com 帐户同步邮件/联系人/日历?

javascript - 谷歌地图自动完成功能不工作

html - Android 版 Chrome,覆盖事件链接的蓝色

html - RSelenium:在文本框中输入值

javascript - 图像叠加不起作用

css - Bootstrap 4 : Difference between text-center and justify-content-center

html - 为 html 电子邮件添加额外的 p 和 span 标签