Problème bizarre d'espacement et de bordure dans le courrier électronique html envoyé à Outlook 2010

Question

J'envoie du courrier html simple qui a une table simple. Le courrier semble très bien dans tous les navigateurs Web, mais Outlook 2010 semble étrange. Comment résoudre ce problème? J'ai essayé plusieurs variantes, mais le résultat est le même.

Voir la capture d'écran outlook ici:

Outlook 2010:

Firefox:

est ici la source html:

<table style="width:500px;font:9pt Arial;background-color:#f6f6f6;" cellspacing="12px"> 
     <tr> 
      <td style="border-bottom:1px solid #e6e6e6;"> 
      <span style="font-size:18px;color:#0033cc;"> 
       <b> 
       <a href="url" target="_blank" style="text-decoration:none">Birthday Invitation</a> 
       </b> 
      </span> 
      <br /> 
      <div style="clear:both;color:#666;overflow:hidden;padding:5px 0 7px;"> 
       Note: Testing 
      </div> 
      </td> 
     </tr> 
     <tr> 
      <td style="border-bottom:1px solid #e6e6e6;padding-bottom:13px;"> 
      <br /> 
      <br /> 
      <b>HOST</b> 
      <br /> 
      <span style="color:red">Host</span>    
      </td> 
     </tr> 
</table> 

Answer 1

Padd La prise en charge et la marge ne sont pas prises en charge dans Outlook 07 ou 10. Cela est dû à la grande décision d'utiliser le moteur de rendu des mots plutôt qu'un moteur de rendu du navigateur.

Vous devez utiliser des gifs d'espacement à la place pour obtenir la mise en page souhaitée.

Lorsque vous avez une marge ou un rembourrage, remplacez-les par une image espaceur de taille appropriée.

Answer 2

Très tard à la fête, mais vous devez supprimer le cellspacing="12px", et l'utiliser uniquement pour mettre à zéro.

balise table devrait ressembler à ceci: <table width="500" border="0" cellpadding="0" cellspacing="0">

Ajouter padding aux <td> « s à la place.

Vous devez également déclarer votre police dans les <td> et ne pas utiliser le raccourci. bgcolor="#f6f6f6" est entièrement pris en charge, tandis que la version css ne l'est pas.