Hotmail "kéo dài" chữ ký HTML / CSS không chính xác (Hotmail incorrectly "stretching" HTML/CSS signature)

問題描述

Hotmail "kéo dài" chữ ký HTML / CSS không chính xác (Hotmail incorrectly "stretching" HTML/CSS signature)

I've been working on making a signature (CSS+HTML) work across multiple platforms, and have hit the wall when it comes to Hotmail. For some reason, when sending this signature to my Hotmail address, it gets stretched vertically. It seems that Hotmail, for one reason or another, is adding a lot of white space below the text in each table cell?

The problem is clearly illustrated in this graphic: http://www.madculture.es/images/test.jpg The first signature there, is the intended output. I added borders on #2, to better highlight the problem. Signature three is how it looks when received in Hotmail! :(

This signature works fine in Outlook 2003‑2013, Gmail, Lotus Notes, but not in Hotmail.

Does anyone know what could be the reason? I'm clueless, having experimented with this for days now.

Here's the full code for the signature:

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

I hope someone can help...

參考解法

方法 1:

Try slowly removing elements and re‑testing at every stage. As a start:

• Your table has a height set that's less than your main image
• Use nested tables, not rowspan for better email client support
• Avoid padding and use set heights instead
• Don't set your td to display: block
• Add font styling directly to td s (not the table) to get Outlook working correctly

(by Andreas BB、CherryFlavourPez)

參考文件

1. Hotmail incorrectly "stretching" HTML/CSS signature (CC BY‑SA 3.0/4.0)