it-swarm.com.de

HTML-E-Mail <hr /> Formatierungsproblem

Ich habe ein Problem mit E-Mail-Clients, die meinen gestylten <hr/> auf einen mit nur einer durchgezogenen Linie zurücksetzen.

Das Folgende ist mein Markup, sieht in Chrome und IE gut aus, aber Outlook setzt die gepunktete Linie immer in eine durchgehende Linie zurück.

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

Ich habe mir Campaign Monitor angesehen, aber nichts Besonderes, um mich dorthin zu führen.

Alle Antworten sind dankbar.

16
El Toro Bauldo

Ich könnte mir vorstellen, dass dies darauf zurückzuführen ist, dass Outlook die Microsoft Word-Rendering-Engine anstelle einer HTML-Engine verwendet und ein hr-Tag wie in msword auf eine durchgezogene Linie zurückgesetzt wird.

Ich würde wahrscheinlich versuchen, eine volle Breite Tabelle-> Zelle oder div und Stil zu verwenden, anstatt ein hr-Tag zu verwenden.

<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;">&nbsp;</td>
</tr>
</table>

nbsp ist vorhanden, falls die Rendering Engine keine leeren Zellen erkennt.

18
kolin

Basierend auf den anderen Antworten habe ich festgestellt, dass dies am besten funktioniert:

<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;">&nbsp;</td>
  </tr>
</table>
<br>

Die Breite scheint auf table in% erforderlich zu sein oder vorzugsweise (gemäß https://www.campaignmonitor.com/resources/will-it-work/guidelines/ ) falls möglich in px des td.

Das border-bottom-Kürzel scheint gut zu funktionieren, wobei die in kolins Antwort genannten longhand -Versionen in Outlook nicht aufgeführt sind.

BEARBEITEN: Was ich bisher gefunden habe und auch funktioniert, zumindest in Outlook (wäre nett, wenn jeder, der dies in anderen Clients testen könnte), ein auf <hr> basierender Ansatz ist.

<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
11
marc82ch

Sie können dieses Beispiel verwenden:

<div style="border-top: 1px dotted #999999;">&nbsp;</div>

Es funktioniert leider nur gegen weißen Hintergrund 

3
CodeGems

Eher unelegant und nur für eine bekannte feste Breite nützlich, aber ich finde, dass dies die Schrecken sind, die Sie besucht haben, wenn Sie versuchen, die Formatierung in HTML-E-Mails zu korrigieren.

<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
2
El Toro Bauldo

Müssen Sie eine Schriftgröße angeben, "" [...] sonst mit der Höhe.

 <tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px">&nbsp;</td></tr> 
0
Brian Miller