Question

我一直致力于在多个平台上制作签名（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>

我希望有人能帮忙......

Answer 1

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

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

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

1 个答案: