Hotmail 错误地“拉伸”HTML/CSS 签名答案

【问题标题】：Hotmail incorrectly "stretching" HTML/CSS signatureHotmail 错误地“拉伸”HTML/CSS 签名
【发布时间】：2013-03-16 04:25:06
【问题描述】：

我一直致力于使签名 (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>

希望有人能帮忙...

【问题讨论】：

标签： html css email hotmail

【解决方案1】：

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

您的桌子设置的高度小于您的主图片
使用嵌套表，而不是 rowspan 以获得更好的电子邮件客户端支持
避免使用 padding 并改用设置高度
不要将td 设置为display: block
将字体样式直接添加到 td s（不是 table）以使 Outlook 正常工作

【讨论】：

电子邮件客户端是如何与浏览器严重脱节的？当我在 2013 年读到使用嵌套表格进行布局的建议时，这让我想哭。:-(
感谢您的回复。我尝试了你所有的建议，但无济于事。在不断剥离签名后，我最终得到：

John D. Doe

Marketing & analytics

- 问题仍然存在......我无法解决这个问题:(
你能把你的整个 HTML 电子邮件粘贴到 jsFiddle 或类似的东西中吗？听起来其他一些 CSS 或 HTML 元素正在以某种方式产生影响。
@Spudley 告诉我。在我的上一份工作中，我花了 2 年的时间整天创建 HTML 电子邮件，每次我不得不求助于font 标签时，我的一小部分都会死去:(
@CherryFlavourPez 我该怎么做呢？如果我在 Outlook 中对收到的电子邮件“查看源代码”，代码中将会添加许多额外的 MS 样式（但这没关系，因为签名在 Outlook 中工作正常）。如果我在 Hotmail 中“查看源代码”，在收到的消息中，有一大堆代码，由于某种原因，我什至无法从我的签名中找到文本。