wake-up-neo.net

HTML-E-Mail-Link-Farbdilemma

Ich habe eine HTML-E-Mail entworfen und habe die folgenden Probleme: Zunächst basiert mein gesamtes Design auf einer blauen Farbe, so dass blauer Text für den Leser/Benutzer nicht lesbar ist. Der Text muss weiß sein Zahlen und Links blau, aber das Hauptproblem ist Microsoft Outlook OWA.

Um die Telefonnummer und die Verbindungsfarbe in GMAIL festzulegen, habe ich Folgendes getan:

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

Dies funktioniert perfekt für GMAIL und wo auch immer, ABER wie bereits erwähnt, die meisten meiner Kunden verwenden Outlook oder MS OWA (Outlook Web Application).

OWA ignoriert die Farbe, die ich in meinem Inline-Stil festgelegt habe, und macht den Link standardmäßig blau. Dies geschieht nur, wenn die E-Mail in der Vorschau angezeigt wird. Wenn Sie die E-Mail tatsächlich öffnen, werden alle Stile angezeigt.

Mein Dilemma ist, was soll ich tun? Ich habe die Hoffnung bereits aufgegeben, aber dies ist mein letzter Ausweg. Gibt es eine Möglichkeit, die Verbindungsfarbe für Outlook OWA zu überschreiben? Ich habe! WICHTIG verwendet, das FONT-Tag, das NESTEN auf 5 Grad.

Das Problem ist hier nicht Outlook, sondern OWA.

Hier ist ein Screenshot, wenn ich das Element in Chrome inspiziere:

Screenshot of Google Chrome Developer Panel

Und hier ist FF:

enter image description here

Irgendwelche Ideen?

Bitte!

19
Asynchronous

Erfolg wird durch das Einfügen der <font>-Deklaration erzielt, die in modernem HTML nicht mehr empfohlen wird, obwohl einige Versionen von OWA dies noch immer berücksichtigen:

<a style="color: #FFFFFF; text-decoration: none" href="#/"><span style="color: #FFFFFF; text- decoration: none"><font color="#FFFFFF">1800-000-0000</font></span></a>
36
estaples

OWA-Linkfarben für Outlook-Webanwendungen ändern sich von Inline-Stilen ... Ich habe einige Stunden versucht, Linkfarben in OWA zu ändern/zu korrigieren, wo sie Inline-Stile für von mir erstellte E-Mail-Vorlagen entfernt. Ich habe verschiedene Techniken mit + Tags ohne Erfolg ausprobiert ..__ Endlich etwas gefunden, das zu funktionieren scheint:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

Geändert zu:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

Scheint soweit gut.

Weitere Tests. Ich habe die etwas abweichende Farbe auf den <td style="color:#FFFFF6;"> gelegt, dann die richtige Farbe auf den <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

8
Kerry Smyth

Es ist ein bekannter Fehler in Outlook, dass, wenn ein Ankertag keine gültige URL enthält, das Styling des Tags ignoriert wird.

Die Tendenz,! Wichtig hinzuzufügen, wirkt sich auch in diesem Fall gegen Sie aus, da Outlook alle mit! Wichtigen Tags vollständig ignoriert.

Fügen Sie Ihrem Anker-Tag eine URL hinzu, oder wickeln Sie den Text in ein Span-Tag in den Anker und setzen Sie Ihr Styling dort.

7
davidcondrey

Ich konnte das Problem beheben, indem ich eine Tabelle in den Tag a einfügte.

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>
4
kavun

Zahlen Gerade als wir uns daran gewöhnt haben, die coolen neuen E-Mail-Tricks nicht verwenden zu können, weil Outlook sie nicht unterstützt, wirft Microsoft OWA mit einer ganzen Reihe neuer Fehler auf uns.

Wir haben das schreckliche Link-Styling umgangen, indem wir einen display:inline-block auf den Link angewendet haben. Damit wird zumindest die Unterstreichung aufgehoben. Ich habe keine Idee warum. 

Beim Versuch, unsere Links in derselben Farbe wie das übergeordnete Element zu gestalten, ist ein anderer Fehler aufgetreten. Aus irgendeinem Grund wurde die Farbe des übergeordneten Elements geändert. Wenn Sie ihn um einen Buchstaben nach oben oder unten ändern, erhalten Sie normalerweise eine ziemlich nahe Farbe.

<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>
1
Bill Malcolm

Ich habe folgendes verwendet und es funktionierte gut in Outlook 2007, 2010, 2013 und Outlook.com. Ich werde mich bald bei OWA erkundigen.

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>
1

Ich habe diesen Thread gesehen und die Optionen oben ausprobiert. Der TD -Hack funktionierte mit der Änderung des Hex-Codes, aber ich stolperte gerade über eine Nizza-Lösung, wenn jemand versuchen wollte:

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

Die Einstellung des DIV auf Textdekoration NONE wurde von OWA unterstützt. Ich wurde persönlich gebeten, die Unterstreichung zu entfernen, also ist es für meinen Fall perfekt.

Ich hoffe die Leute finden das nützlich. Vielen Dank für alle, die auch ihre Lösungen hinzugefügt haben.

0
pitzki

Beim Versenden von HTML-E-Mails sollten Sie sich an alte HTML3 und HTML4 ..__ halten. E-Mail-Clients können mit CSS2 und höher nicht gut spielen. Inline-CSS funktionieren viel besser.

Anstatt:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a> 

In dieser Zeile befinden sich übrigens Syntaxfehler. Nach jeder CSS-Deklaration benötigen Sie ein;

Korrigiert:

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a> 

Versuche dies:

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

Vergessen Sie nicht, die HTML-Version im DOCTYPE anzugeben.

Ich habe festgestellt, dass ich auf beiden Seiten in dieser Situation arbeite ... Ich habe mit IMAP an einem webbasierten E-Mail-Client mit PHP gearbeitet, ich musste HTML-E-Mails d brechen Sie nicht nur das Layout der App ab, sondern auch das beabsichtigte Verhalten von Schaltflächen und Formularen. Wie? du könntest fragen Bei einem Desktop-E-Mail-Client wäre dies wahrscheinlich kein Problem, aber bei einem webbasierten E-Mail-Client, der externe Css-/JS-Dateien lädt, kann dies zu einer großen Anzahl möglicher Fallstricke und bösartigen Bugs führen.

Bei einer anderen Gelegenheit arbeitete ich an Hochzeitseinladungen, die über HTMl-E-Mails gesendet wurden,. Die Menge an Inline-CSS, die wir machen mussten, war lächerlich. Damit es funktioniert, müssen Sie meistens HTML3 und vielleicht ein bisschen HTML4 verwenden, aber nicht zu viel.

Ich empfehle Ihnen, mit Tabellen und veraltetem HTML3-Inline-CSS zu experimentieren.


<a href="#" style="color: #FFF;"><strong style="color: #FFF; font-weight: normal;">Example Link</strong></a>

es hat für mich funktioniert! Stellen Sie sicher, dass Sie <strong> verwenden, ich habe es mit anderen Tags versucht, aber das hat nicht funktioniert.

0
leon

Diese Frage ist bis heute 21-12-2017 relevant. Ich hatte kein Problem mit meinem Code in Outlook, Google Mail, aber nicht in Outlook-Webanwendung. Ich musste dieses veraltete Tag verwenden, um es zu lösen.

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

Es war seltsam, dass der Stil innerhalb des Hyperlinks NICHT für Outlook Web App (OWA) funktioniert. Dazu wurde <font color="#ff6600 !important;"> hinzugefügt! Seltsam, aber so will Microsoft uns necken!

0
curious.netter

OWA entfernt tatsächlich alle Stile des a-Tags, einschließlich des von Ihnen eingeschlossenen span-Tags. Sie können Stile im Kopfbereich hinzufügen, aber OWA ignoriert dies für Hyperlinks. Ich habe einen Stil für a, a: link, a: visit im Kopf, die gleiche Farbe wie im a-Tag und den dazugehörigen span-Tag hinzugefügt. Das Ergebnis? Mein Linktext ist farbig, aber die Unterstreichung ist immer noch das Standard-Blau. Der Hinweis: Es gibt keinen Hinweis für mich.

0
Geert

Fügen Sie zu jedem fraglichen Link eine Klasse my-link und das folgende CSS in Ihrem Tag style hinzu:

.my-link a,
a[x-Apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

Das deckt normalerweise Dinge für mich ab. Wenn dies fehlschlägt, gibt es hier eine schwerere Version dieses Codes:

.my-link a,
a[x-Apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

Quelle

0
Ted Goas