Hotmail 错误地"stretching" HTML/CSS 签名



我一直致力于使签名(CSS+HTML)在多个平台上工作,并且在Hotmail上遇到了瓶颈。由于某种原因,当把这个签名发送到我的Hotmail地址时,它会垂直拉伸。Hotmail似乎出于这样或那样的原因,在每个表格单元格的文本下面添加了很多空白。

这个问题在这张图中清楚地说明了:http://www.madculture.es/images/test.jpg这里的第一个签名是预期的输出。我在#2上添加了边框,以更好地突出问题。签名三是它在Hotmail中收到时的样子!(

此签名在Outlook 2003-2013、Gmail、Lotus Notes中可以正常工作,但在Hotmail中不行。

有谁知道原因是什么吗?我对此毫无头绪,我已经试验了好几天了。

以下是签名的完整代码:

<div>
 <table border="1" cellspacing="0" cellpadding="1" height="50" style="font-family: Verdana, Arial, sans-serif; font-size: 1em;">
  <tr>
   <td rowspan="4">
    <img src="mc2.png" nosend="1" width="170" height="86" />
   </td>
   <td style="padding-top: 2px;">
    John D. Doe
   </td>
  </tr>
  <tr>
   <td style="font-size: 0.85em; font-weight: bold; color: #932D1F; padding-bottom: 2px;">
    Marketing & analytics
   </td>
  </tr>
  <tr>
   <td style="display: block;">
    <a href="mailto:johnd@doe.com" style="color: #666; text-decoration: none; font-size: 0.9em;">johnd@doe.com</a>
   </td>
  </tr>
  <tr>
   <td style="font-size: 1.05em; font-weight: bold; color: #444; padding-top: 1px;">
    Madrid
   </td>
  </tr>
 </table>
</div>

尝试慢慢删除元素并在每个阶段重新测试。作为开头:

  • 你的表有一个高度设置小于你的主图像
  • 使用嵌套表,而不是rowspan,以获得更好的电子邮件客户端支持
  • 避免使用padding并使用设置高度
  • 不要将td设置为display: block
  • 将字体样式直接添加到td s(而不是table)以使Outlook正常工作

相关内容

  • 没有找到相关文章

最新更新