Problème de style avec les courriels HTML <hr />
J'ai un problème avec les clients de messagerie qui rétablit mon <hr/> stylé en un avec une ligne continue.
Ce qui suit est ma balise, semble bien dans Chrome et IE mais Outlook rétablit toujours la ligne pointillée en une ligne continue.
<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>
J'ai consulté Campaign Monitor mais rien de particulier ne m'a guidé.
Toutes les réponses ont apprécié.
J'imagine que c'est parce qu'Outlook utilise le moteur de rendu Microsoft Word, plutôt qu'un moteur HTML, et qu'une balise hr serait simplement rétablie en une ligne pleine comme dans msword.
J'essaierais probablement d'utiliser une table pleine largeur> cellule ou div et un style plutôt qu'une balise hr.
<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;"> </td>
</tr>
</table>
nbsp est présent au cas où le moteur de rendu ne reconnaît pas les cellules vides.
Sur la base des autres réponses, j'ai trouvé que cela fonctionnait mieux:
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td>
</tr>
</table>
<br>La largeur semble être nécessaire sur table en% ou de préférence (comme indiqué dans https://www.campaignmonitor.com/resources/will-it-work/guidelines/ ) définissez-la sur px sur td si possible.
Le raccourci border-bottom semble bien fonctionner, contrairement aux versions longhand mentionnées dans la réponse de kolin dans Outlook.
EDIT: Ce que j’ai trouvé précédemment utilisé et qui fonctionne également, du moins dans Outlook (ce qui serait agréable si quelqu'un le pouvait, pourrait le tester sur d’autres clients), c’est une approche basée sur <hr>.
<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
Vous pouvez utiliser cet exemple:
<div style="border-top: 1px dotted #999999;"> </div>
Cela ne fonctionnera malheureusement que sur un fond blanc
Plutôt inélégant et utile seulement pour une largeur fixe connue, mais je constate que ce sont les terreurs qui vous sont visités lorsque vous essayez de corriger la mise en forme dans les courriels HTML '.
<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
Besoin de déclarer une taille de police, sinon "" gâche avec la hauteur.
<tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px"> </td></tr>