html - Hotmail "stretching"HTML/CSS 签名错误

Question

我一直致力于使签名 (CSS+HTML) 在多个平台上工作，但在涉及到 Hotmail 时却碰壁了。 出于某种原因，将此签名发送到我的 Hotmail 地址时，它会被垂直拉伸(stretch)。 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>

希望有人能帮忙...

Answer 1

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

• 您的表格设置的高度低于您的主图片
• 使用嵌套表，而不是 rowspan 以获得更好的电子邮件客户端支持
• 避免使用填充，而是使用设置的高度
• 不要将您的 td 设置为 display: block
• 将字体样式直接添加到 td(不是 table)以使 Outlook 正常工作