Outlook-Software entfernt die Inline-CSS in E-Mails

Ich habe eine E-Mail wie die folgende. Das Problem ist, dass es in Gmail gut funktioniert, aber bei Outlook funktionieren alle CSS-Inline-Anweisungen nicht.Outlook-Software entfernt die Inline-CSS in E-Mails

Ein Beispiel dafür ist:

<a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a> 

//The image width is stripped out and the original size is used to display

Gibt es dafür irgendwelche Korrekturen?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Welcome to Pure Apparel</title> 
</head> 
<body> 
    <table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);"> 
<tbody> 
<tr> 
<td class="space" style="width: 20px; padding: 7px 0;">&nbsp;</td> 
<td align="center" style="padding: 7px 0;"> 
<table class="table" bgcolor="#ffffff" style="max-width: 650px; width: 100%; border-collapse: collapse; margin: auto;"> 
<tbody> 
<tr> 
<td colspan="2" align="center" class="logo" style="padding: 7px 0;"><a title="{shop_name}" href="{shop_url}" style="color: #337ff1;"> <img src="{shop_logo}" alt="{shop_name}" /> </a></td> 
</tr> 
<tr> 
<td colspan="2" align="center" class="titleblock" style="border-bottom: 1px solid #636566; border-top: 1px solid #636566; padding: 7px 0;"><a href="{shop_url}56-new-in" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">New-In</a> <a href="{shop_url}23-women" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Women</a> <!--<a href="{shop_url}40-men" style="font-weight:500;font-size:17px;line-height:26px;width:20%;float:left;color:#555454;text-decoration:none;">Men</a>--> <a href="{shop_url}content/7-fw15" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Lookbook</a> <a href="http://pureapparel.me/" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Be-pure blog</a></td> 
</tr> 
<tr> 
<td colspan="2"><a href="{shop_url}content/24-international-shipping"><img style="width: 100%; display: block;" src="{img_dir}en/welcome.jpg" /></a></td> 
</tr> 
<tr style="border-bottom: 1px solid #636566; text-align: center;"> 
<td style="padding: 10px 0px;"> 
<h3 style="margin-top: 5px;">New Collection</h3> 
<p>Enjoy online shopping with our easy check out process and reliable door to door courier service.</p> 
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; margin-bottom: 5px; text-decoration: none;" href="{shop_url}" target="_blank">Shop now</a></td> 
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box1.jpg" /></td> 
</tr> 
<tr style="border-bottom: 1px solid #636566; text-align: center;"> 
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box2.jpg" /></td> 
<td style="padding: 10px 0px;"> 
<h3>be-pure blog</h3> 
<p>With access to our be-pure blog, be the first to know about our newest design, latest yoga & fitness trends and community events.</p> 
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; text-decoration: none;" href="http://pureapparel.me/" target="_blank">View blog</a></td> 
</tr> 
<tr style="border-bottom: 1px solid #636566;"> 
<td colspan="2" style="padding: 10px 0px;"> 
<h3>Have a Question?</h3> 
<div style="width: 100%; text-align: center;"><img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q1.jpg" /> <img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q2.jpg" /> <img style="width: 120px;" src="{img_dir}en/q3.jpg" /></div> 
</td> 
</tr> 
<tr style="text-align: center;"> 
<td colspan="2"> 
<p>Stay connected with us</p> 
<div><a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a> <a href="https://twitter.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}tw.png" /></a> <a href="http://instagram.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}ig.png" /></a></div> 
<p>Please add <a style="text-decoration: none; color: #58595b;" href="mailto:[email protected]">[email protected]</a> to your approved senders or address book.</p> 
<p>If you do not wish to receive any eNews, please click here to update your preferences or <a href="{my_account_url}" style="color: #58595b;">unsubscribe</a> from this list</p> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<p style="float: left; text-align: center; width: 25%;">@2015 Pure Retail Ltd.</p> 
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}" style="text-decoration: none; color: #58595b;">www.be-pure.com</a></p> 
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/3-terms-and-conditions-of-use" style="text-decoration: none; color: #58595b;">Terms & Conditions</a></p> 
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/15-privacy-policy" style="text-decoration: none; color: #58595b;">Privacy Policy</a></p> 
</td> 
</tr> 
</tbody> 
</table> 
</td> 
<td class="space" style="width: 20px; padding: 7px 0;">&nbsp;</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

Eigentlich ist der Quellcode nicht die CSS nicht abzustreifen, aber wenn die Seite angezeigt wird, fungiert Outlook als ob die CSS wird gezupft, eine Idee?

Update (29/11/2015):

Also, ich fand schließlich heraus, dass width:50px nicht funktioniert, ich habe width="50" verwenden, um die Größe zu steuern, wie ich nur unterstützen müssen Outlook 2013 und spätere Versionen, frage ich mich:

Ist es wahr, dass Outlook 2013 keine Inline-CSS wie width:50px auf IMG-Tags unterstützen?
Wenn es das unterstützt, liegt das Problem stattdessen am E-Mail-Server?
Gibt es eine einfachere Möglichkeit, meine Vorlage für die Unterstützung von Outlook 2013 zu konvertieren?

Quelle

2015-11-27 user3538235

Alle Inline-Stile sind entfernt? – holden

warte einen Moment, ich werde den Quellcode der E-Mail posten danke – user3538235

aktualisiert, bitte nehmen Sie viel, danke für Ihre Hilfe. – user3538235

Outlook verwendet eine andere Art der Ausführung von Stylesheets. Ist nicht SMTP-Einstellungen oder E-Mail-Einstellungen. Es hängt davon ab, wie der E-Mail-Dienst Gmail, Outlook und Yahoo das CSS anzeigt. Wie Outlook-Stile = Wie IE-Stile.

Ich habe Mailchimp verwendet dies für alle Element, das ich verwendet habe, und es sieht nicht genau das gleiche in Outlook und Gmail, aber ist das nächste, was ich bekommen kann.

<p class="MsoNormal" style="text-align:justify; line-height:150%; font-family:Arial, Helvetica, sans-serif;">

Die Anleitung, die ich für Outlook verwendet habe, ist dies. Beachten Sie, dass Sie ihrer Community (kostenlos) beitreten müssen, um den Outlook-Leitfaden zu erhalten, der sich meiner Meinung nach lohnt und Ihnen den Ärger erspart.

Der vorherige Link sollte Ihnen erklären, aber wenn Sie weitere Informationen möchten, können Sie immer die folgenden zwei Links, die ich auch verwendet habe.

Für Outlook/Hotmail, sie haben in der Regel eine mso Syntax vor dem Styling wie http://templates.mailchimp.com/development/css/outlook-conditional-css/

Für bestimmte Elemente, die E-Mail-Anbieter verwenden, die Sie hier finden können.

Wenn Sie etwas Zeit damit verbringen, eine E-Mail-Vorlage zu erstellen, die für alle E-Mail-Dienste funktioniert und sie beim nächsten Mal an Ihre Bedürfnisse anpasst, spart viel mehr Zeit und Mühe als bei Null anfangen.

Quelle

2015-11-29 13:25:40 cweitat

so weit es nicht unterstützt Polsterung, Rand, Höhe, Breite, oh mein Gott – user3538235

Ich möchte einen Knopf mit Polsterung und Hintergrundfarbe erstellen, aber es funktioniert auch nicht – user3538235

Haben Sie den Code für die Schaltfläche? Padding kann einige Probleme haben und wenn die Schaltfläche Text enthält, kann dies zu Problemen mit der Zeilenhöhe führen. – cweitat

Outlook ignoriert Inline-Stile nicht. Es versteht jedoch nicht viele CSS-Eigenschaften. Dinge, die wir heute für selbstverständlich halten: Floats, Margen, Polsterungen. Kampagnenmonitor haben eine sehr gute table of which things will work in which email clients.

Sie können fast immer mit vielen verschachtelten Tabellen umgehen. Es ist hässlich, aber es ist plattformübergreifend und das ist alles, was zählt.

Manchmal im E-Mail-Marketing müssen Sie akzeptieren, dass es nicht 100% identisch in jedem E-Mail-Client aussehen wird und das ist in Ordnung. Solange es in jedem Client gut aussieht, ist es egal, ob es hier und da 2px zusätzlichen Abstand gibt.

E-Mail-Marketing ist oft über progressive Verbesserung. Sie tun das Beste, was Sie für die Leute tun können, die Lotus Notes und andere alte Kunden verwenden, und Sie geben den Leuten, die Gmail in Chrome verwenden, den letzten Schliff. Obwohl Outlook beispielsweise Medienabfragen nicht unterstützt, können Sie sie dennoch verwenden (und wahrscheinlich auch verwenden), weil andere Clients dies tun. Das Schöne daran ist, dass wenn ein E-Mail-Client Medienabfragen unterstützt, sie wahrscheinlich auch modernere Dinge wie Floats unterstützen, so dass Sie Eigenschaften wie diese in den Medienabfragen verwenden können, wenn Sie möchten.

CSS-Tricks haben einen ziemlich guten Artikel, der die general sort of methodology you should follow diskutiert.

Schreiben von HTML-E-Mails ist weitgehend eine Angelegenheit Erfahrung. Tun Sie es genug und Sie werden herausfinden, die verschiedenen Möglichkeiten, Dinge zu tun, im Vergleich zum Schreiben für das Web. Ich empfehle Ihnen, alles zu testen, was Sie durch Litmus tun, besonders wenn Sie Arbeit für einen Kunden produzieren. Es zeigt Ihnen, wie Ihre E-Mail in fast jedem E-Mail-Client gerendert wird. Es ist ein Abo-Service - und zwar ein teures -, aber es gibt wirklich keinen vergleichbaren kostenlosen Service.

Quelle

2015-12-04 11:55:46 Michael

Outlook-Software entfernt die Inline-CSS in E-Mails

Antwort

Verwandte Themen