La hauteur de ligne ne fonctionne pas dans Outlook 2010 pour les e-mails HTML
Outlook 2010/Outlook 2007 ne semble pas respecter la hauteur de ligne que ce soit dans mon courrier électronique HTML. (Il fonctionne parfaitement dans Outlook 00 et Outlook 03)
J'ai fait de nombreuses recherches sur Google - et les tableaux de support HTML CSS que j'ai trouvés disent qu'Outlook 2010/2007 DEVRAIT comprendre la hauteur de la ligne.
J'ai essayé de mettre la hauteur de ligne sur l'élément parent du bloc, et l'élément de paragraphe enfant, et comme sur un ID dans la balise de style dans la tête, et toutes les combinaisons des éléments ci-dessus.
Je me suis également assuré que je déclarais explicitement la hauteur de ligne comme une valeur de pixel nettement supérieure à la taille du texte (mais j'ai également essayé% et em). J'ai essayé de mettre! Important dans la déclaration - et j'ai même essayé de valign avec toutes les autres astuces que je pouvais trouver en ligne .... J'ai utilisé la hauteur de ligne pour par exemple déterminer le bouton padding-top et padding-bottom, car la prise en charge des e-mails HTML pour le remplissage/la marge est tellement boguée.
J'apprécierais vraiment toute aide à ce sujet. Vraiment au point de frapper la tête maintenant!
L'email réel est énorme car c'est une newsletter compliquée, mais voici un extrait du style dans la tête, et une section de tableau dans laquelle la hauteur de ligne ne fonctionne pas - j'espère que cela suffit!:
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
}
body{
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
margin-bottom:0px !important;
margin-top:0px !important;
background-color:#e5e5e5;
}
p{
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
margin-bottom:0px !important;
margin-top:0px !important;
display:block;
}
a:link, a:visited, a:active{
color:#55c2d9;
text-decoration: underline;
}
a:hover{
text-decoration: underline;
}
.body a:link, a:visited, a:active{
color:#55c2d9;
}
img{
border: 0;
display: block;
}
table.main {
background-color: #ffffff;
width:650px;
}
td {
}
#header-top p{
line-height:33px;
}
</style>
<!-- Content -->
<table border="0" cellspacing="0" cellpadding="0" class="body">
<!-- Row 1 -->
<tr valign="top">
<td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top" width="650" height="33" bgcolor="#262626">
<table border="0" cellspacing="0" cellpadding="0" id="header-top">
<!-- Row 1.1 -->
<tr valign="top">
<td style="" valign="top" width="16" height="" bgcolor="">
</td>
<td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="490" height="33" bgcolor="">
<p><a href="#">click here to view this email in a browser</a></p>
</td>
<td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="62" height="33" bgcolor="">
<p>find us on:</p>
</td>
<td style="" valign="top" width="16" height="" bgcolor="">
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- Content -->
Outlook prend en charge la hauteur de ligne spécifiée en pourcentages. Par exemple, la hauteur de ligne: 1,1 n'est pas prise en charge, mais la hauteur de ligne: 110% l'est.
Réponse tardive, mais depuis que j'ai récemment résolu un problème de hauteur de ligne similaire dans Outlook, je voulais partager ma solution de contournement hacky.
Pour une raison quelconque, si vous jetez une liste non ordonnée dans le code HTML juste avant la balise CLOSING de la balise pour laquelle vous avez spécifié la hauteur de ligne, Outlook 2010 respecte la hauteur de ligne.
Vous pouvez rendre la liste non ordonnée vide et invisible:
<ul style="list-style-type: none; visibility:hidden;"></ul>
Exemple:
<p style="font-size: 12px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul style="list-style-type: none; visibility:hidden;"></ul>
</p>
Avertissement: je n'ai pas testé cela de manière exhaustive. Il fonctionne dans mon modèle via un ESP dans Outlook 2010, la version actuelle de Gmail (27 juillet 2012) et l'application de messagerie iPhone. Je ne sais pas si l'astuce fixe universellement la hauteur de ligne problème dans d'autres balises. Je reconnais également que c'est un correctif cludgey, mais c'est un problème cludgey; et, comme c'est souvent le cas avec le mépris flagrant d'Outlook pour les spécifications HTML, le correctif est souvent aussi stupide que le problème. Utilisez-le si vous le souhaitez, mais testez-le de manière approfondie avant de l'envoyer aux destinataires réels.
Outlook utilise le processeur html Word pour le rendu et l'édition html. Habituez-vous aux tableaux et oubliez les CSS, et si - utilisez uniquement les CSS en ligne. vous avez juste quelques possibilités: fond, famille de polices, police.taille, couleur.
une liste complète des css supportés peut être trouvée ici , un tutoriel est ici .
Mais vous devez aussi penser à vos récepteurs - s'ils sont sur google mail ou yohoo mail, votre css peut être complètement supprimé
campaignmonitor.com/resources est une bonne ressource pour développer des newsletters par e-mail, ils effectuent également une vérification répétée de tous les services de messagerie et de leurs fonctionnalités HTML/CSS
Pour que la hauteur de ligne fonctionne dans Outlook, après avoir ajouté "mso-line-height-rule: exactement;" avant la hauteur de ligne, assurez-vous d'utiliser un pourcentage au lieu d'une valeur décimale (c'est-à-dire 150% au lieu de 1,5)
Réglage du line-height utiliser css en ligne sur la cellule du tableau devrait être bien mais vous n'avez vraiment pas besoin de ces <p> balises là-dedans, qui ne font qu'introduire des problèmes de formatage et les références à ces <p> balises dans le <style> balises dans le <head> sera ignoré par un certain nombre de clients.
La meilleure approche pour ce problème est d'utiliser un positionnement relatif et une propriété supérieure, cela fonctionne comme un charme, voir l'exemple de code ci-dessous
<div style="display: inline-block; ">
<font>Line 1</font><br/>
<font style="position: relative; top: -5px;">Line 2</font><br/>
<font style="position: relative; top: -10px;">Line 3</font><br/>
</div>