HTML-E-Mail-Tische gebrochen in Outlook 2007 & 2010
Habe ich eine E-Mail-Vorlage, die funktioniert in den meisten E-Mail-clients (oder zumindest akzeptabel), aber komplett bricht in Outlook 2007 und Outlook 2010.
Ich bin mir bewusst, dass diese Versionen von Outlook verwenden Sie das Word-rendering-engine anstelle von IE.
Ich habe gehört, das Outlook-Seitenumbruch-bug, aber das scheint nur auf den vertikalen Abstand. Mein Problem ist im horizontalen Abstand.
Code: http://jsbin.com/alagih/edit#html,liveb
Testergebnisse für alle gängigen E-Mail clients: http://artletic.createsend.com/screens/y/F2B9C33F1297A73F
Outlook 2007 screenshot:
- Debugging starten: Entfernen Sie alle amazonaws-gehosteten Bilder. Dann beginnen entfernen von style-Definitionen. Schließlich werden Sie eins finden, das Wort barf.
- Danke @marc-b. Ich habe versucht, eine Reihe von Variationen, aber hatte gehofft, um zu vermeiden, testen 50 verschiedenen Zeiten. Ich bin mit CampaignMonitor-Tests (mit Lackmus). $5 pro test ist gut für ein paar, aber beim Debuggen, das summiert sich schnell!
- Sollte kein echter Grund kann man nicht Schüren eine schnelle test-script mit den raw-html fest codiert und arbeiten auf, die zu Ihrer eigenen mailbox ohne Beteiligung Dritter. Wenn Sie nicht zu replizieren, mit script, dann anfangen zu Schreien bei den Anbietern.
- Ich könnte, wenn ich hatte einen PC mit Outlook. 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich gefunden, dass speziell für HTML-E-Mails in outlook 2007 ist, sollten Sie Ihre Breite Parameter in den Tags und inline-CSS.
so zum Beispiel
<td width="150px" style="width: 150px;">
Versuchen Sie, eine Breite, um alle td, die ein Bild enthält.
Beispiel:
Auch stellen Sie sicher, diese Bilder werden eingestellt, um zu
display: block
.Du nie eine Breite für die Tabelle, die Ihre Körper der Nachricht.
Gesetzt
<table border="0" width="">
Als für Ihre "franco.jpg" Bild, sieht aus wie Outlook ignoriert die inline-margin auf der
img
tag. Versuchen Sie, erstellen Sie eine zweispaltige Tabelle, die für Ihren Inhalt und entweder wickeln Sie das Bild in ein div und gib ihm einen rechten Rand oder wickeln Sie Ihren text in einem div und geben Sie einen linken Rand. Outlook nicht mag Polsterung aus irgendeinem Grund.Ebenfalls seit Outlook 2007 und wohl auch 2010 ist mit Word als rendering-engine, die es ignorieren bestimmte Stile wie
background-image
(background-position, auch), es wird jedoch annehmen, `bgcolor' und 'background-color'.Der Schnellste Weg, um test für Outlook 2007/2010 wäre, um es zu öffnen in MS Word. Es Rendern soll, schließen Sie an, was angezeigt würde, in denen Outlook-Versionen.
Nicht sicher, was verursacht die
=E2=80=9D
.Wenn Sie wirklich müssen Sie hintergrund-Bilder, versuchen dieser hack.