1. Accueil
  2. Question et réponse
  3. Formatage de courrier électronique html pour Outlook

Formatage de courrier électronique html pour Outlook

2011-05-02 5 views
25

J'ai un bulletin HTML qui fonctionne dans la plupart des clients de messagerie, mais le formatage est foiré dans Outlook.Formatage de courrier électronique html pour Outlook

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
    body { 
    background-color: #98AFC7; 
    } 
</style> 
<title></title> 
</head> 
<body> 
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;"> 
    <tr> 
     <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td> 
    </tr> 
    <tr> 
     <td> 
      <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;"> 
       <tr> 
        <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;"> 
        <h3>Top Stories</h3> 
         <ul> 
          <li>Topic 1</li> 
          <li>Topic 2</li> 
          <li>Topic 3</li> 
         </ul> 
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
        </td> 
        <td valign="baseline" style="padding: 10px; border: 1px solid;"> 
         <h3>Latest News</h3> 
         <p> 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
         </p> 
        </td> 
       </tr> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td cellpadding="10px" style="border: 1px solid; cellspacing: 0; width: 100%; height: auto; text-align: center;"> 
      <strong>Copyright &copy 2011 Frost Miller Group </strong> 
     </td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto"> 
      <center> 
      <a href="#">Contact Us</a> 
      &nbsp; 
      <a href="#">Terms of Use</a> 
      &nbsp; 
      <a href="#">Trademarks</a> 
      &nbsp; 
      <a href="#">Privacy Statement</a> 
      &nbsp; 
      <a href="#">Site Feedback</a> 
      </center> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

Quels changements dois-je effectuer pour que l'affichage soit correct dans Outlook?

Source

2011-05-02 user544079

Répondre

36

Pour être en mesure de vous donner spécifique aide, vous devez expliquer ce que certaines parties spécifiquement « se foiré », ou peut-être offrir une capture d'écran. Il est également utile de savoir dans quelle version d'Outlook vous rencontrez le problème.

De toute façon, CampaignMonitor.com's CSS guide m'a souvent aidé à déboguer des incohérences de client de messagerie.

A partir de ce guide, vous pouvez voir plusieurs choses ne fonctionnera pas bien ou pas du tout dans Outlook, voici quelques points saillants des plus importants: ceux

  • Différents types de plus sophistiqués sélecteurs , par exemple (Combinateur enfant), E + F (Combinateur frère/sœur adjacent), E ~ F (Combinateur général de fratrie). Cela signifie malheureusement recourir à des solutions de contournement comme les styles en ligne.
  • Certaines propriétés de police, par ex. white-space ne fonctionnera pas.
  • La propriété background-image ne fonctionnera pas.
  • Il existe plusieurs problèmes avec les propriétés de modèle de boîte, le plus important étant height, width, et les versions max- ne sont pas utilisables ou comportent des bogues pour certains éléments.
  • Des problèmes de positionnement et d'affichage (par exemple display, float s et position sont tous sortis).

En bref: combinant CSS et Outlook peut être une douleur. Soyez prêt à utiliser de nombreuses solutions de contournement laides.

PS. Dans votre cas spécifique, il existe deux problèmes mineurs dans votre code HTML qui peuvent vous causer un comportement étrange. Il y a "align=top" où vous avez probablement l'intention d'utiliser vertical-align. En outre: cell-padding pour td s n'existe pas.

Source

2011-05-02 20:01:19 Jeroen

+0

Plusieurs années plus tard, Microsoft Outlook 2013 a toujours le même moteur de rendu HTML d'Outlook 2007. :( – Zarepheth

+1

@Zarepheth Aye, je revisite ma propre réponse aussi tous les 6 à 18 mois, parfois je la terre même ici Googling – Jeroen

+9

Un ajout utile que je suis tombé sur: pour tester réellement comment un email HTML rend dans Outlook, vous pouvez ouvrir le fichier HTML dans Word, les deux applications MS Office utilisent le même moteur de rendu – Paul

11

Vous devriez certainement vérifier le MSDN sur ce que Outlook prendra en charge en ce qui concerne css et html. Le lien est ici: http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx. Si vous n'avez pas au moins Office 2007, vous devez vraiment mettre à niveau car il existe des différences majeures entre 2007 et les éditions précédentes. Essayez aussi d'enregistrer l'e-mail résultant dans un fichier et examinez-le avec Firefox, vous verrez ce qui est changé par Outlook et possiblement une question plus spécifique à poser. Vous pouvez utiliser Word pour voir l'e-mail comme une sorte d'aperçu (mais vous n'obtiendrez pas d'informations sur les styles appliqués ou non.)

Source

2011-05-02 20:15:41 scrappedcola

+2

Enregistrer en HTML, puis l'examiner dans un navigateur est une excellente recommandation (et m'a massivement aidé) - merci – hobailey

Questions connexes

 Questions connexes