Outlook 2007 modifica gli stili di collegamento in un messaggio di posta elettronica HTML con una sottolineatura blu quando viene inviato a Hotmail, Gmail e così via. Eventuali correzioni?

Question

Ho utilizzato i modelli di email HTML che ho ottenuto da http://www.campaignmonitor.com/templates/ E su tutti gli esempi che ho seguito, quando invio un'e-mail utilizzando il modello HTML, a tutti i link viene fornita l'orribile sottolineatura blu di default. Le email vengono inviate utilizzando Outlook 2007 e quando vengono visualizzate in Outlook vanno bene. Tuttavia, in Hotmail e Gmail, questa sottolineatura blu persiste indipendentemente dal colore del testo.

Ho provato styling in linea di un tag in questo modo:

<a href="./" style="color: #E3A216; text-decoration: none;">Mauris commodo hendrerit risus</a> 

Se uso il codice esattamente lo stesso modello e-mail HTML e inviare dal mio account di Hotmail a un altro account hotmail funziona perfettamente. Quindi, per me questo è un problema di Outlook 2007.

Sono stato in grado di analizzare l'html che Outlook invia al destinatario di Hotmail e ho rilevato che Outlook associa un foglio di stile sopra al codice HTML. Questo è ciò che manda:

<style> 
.ExternalClass .ecxshape 
{;} 
</style> 

<style> 
.ExternalClass p.ecxMsoNormal, .ExternalClass li.ecxMsoNormal, .ExternalClass div.ecxMsoNormal 
{margin-bottom:.0001pt;font-size:11.0pt;font-family:'Calibri','sans-serif';} 
.ExternalClass a:link, .ExternalClass span.ecxMsoHyperlink 
{color:blue;text-decoration:underline;} 
.ExternalClass a:visited, .ExternalClass span.ecxMsoHyperlinkFollowed 
{color:purple;text-decoration:underline;} 
.ExternalClass p.ecxMsoAcetate, .ExternalClass li.ecxMsoAcetate, .ExternalClass div.ecxMsoAcetate 
{margin-bottom:.0001pt;font-size:8.0pt;font-family:'Tahoma','sans-serif';} 
.ExternalClass span.ecxEmailStyle17 
{font-family:'Calibri','sans-serif';color:windowtext;} 
.ExternalClass span.ecxBalloonTextChar 
{font-family:'Tahoma','sans-serif';} 
.ExternalClass .ecxMsoChpDefault 
{;} 
@page WordSection1 
{size:612.0pt 792.0pt;} 
.ExternalClass div.ecxWordSection1 
{page:WordSection1;} 

</style> 

.ExternalClass sembra essere l'impostazione dei valori per i tag, ma la mia linea styling non sembra essere quello di sovrascrivere Outlook è l'aggiunta al messaggio di posta elettronica.

Ho provato a creare un foglio di stile nella sezione di testa, e anche nella sezione del corpo, ma questo non fa nulla.

Qualcuno sa una correzione per questo? O voglio eliminare la sottolineatura, o anche solo la visualizzazione della sottolineatura nel colore che ho specificato per i collegamenti.

Grazie a tutti coloro che possono aiutare.

Answer 1

Se il tuo problema è tanto semplice quanto non riuscire a sovrascrivere il foglio di stile di Outlook, dovresti provare la dichiarazione !important con gli stili in linea, ad es.

<a href="./" style="color: #E3A216 !important; text-decoration: none !important;">Mauris commodo hendrerit risus</a> 

Answer 2

Per eliminare il blu in Gmail basta cambiare il colore da # 000000 a # 000001. Gmail rende blu tutti i link neri.

Answer 3

Non utilizzare stili, in linea o in altro modo, nei modelli di e-mail. Il codice deprecato è l'ordine del giorno e la sottolineatura del font viene evitata applicando (in) correttamente la dichiarazione font-color attorno al link stesso, anche se è già presente all'interno di una dichiarazione font per il testo circostante. Esempio:

<font face="Arial, Helvetica, sans-serif" color="#ffffff" size="2">Some non link text here followed by <a href="http://www.yourlink.com" target="_blank"><font color="#ffffff"><u><em>the text for the link here surrounded by the font style specifically for the link</em></u></font></a> irrespective of the text that surrounds it</font> 

Divertiti. Le email HTML sono molto arretrate nel modo in cui devono essere costruite per soddisfare tutti i client di posta elettronica.

Answer 4

In realtà, gli stili in linea sono l'unico modo per applicare lo stile al testo, ma il modo migliore è dichiararlo più volte. L'uso del tag FONT come detto sopra non fa il trucco per tutti i client di posta elettronica.

Il modo corretto di usare il FONT-tag per le email HTML:

<font face="Arial, Helvetica, sans-serif" size="1" color="#333333" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333">Example of styled text.</font> 

Il modo migliore per stile di testo, è quello di fare come questo:

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600"> 
    <tr> 
    <td width="600" bgcolor="#ffffff" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333;"> 
     <a href="#" style="color:#333333; text-decoration:underline;"><span style="color:#333333;">Example of styled linktext.</span></a> 
    </td> 
    </tr> 
</table> 

I metti uno stile in più nella testa, che si applica in Outlook (ma non in Gmail):

<style type="text/css"> 
    a, a:link, a:visited { color:#333333; } 
</style> 

Answer 5

Avvolgere il testo con un tag <span> con un attributo style.

Si dovrebbe anche usare <font> per essere molto attenti.

Ad esempio:

<a style="color:#E3A216; text-decoration:none;"> 
    <span style="color:#E3A216;"> 
    <font color="#E3A216"> 
     Click me 
    </font> 
    </span> 
</a> 

Answer 6

E 'un bug noto in Outlook che se un tag di ancoraggio non contiene un URL valido, sarà probabilmente ignorato lo stile definito.

Answer 7

No - Non utilizzare i tag dei caratteri. Il Tag Font viene reso in modo diverso da una combinazione di client e-mail-browser Internet ad un altro. Puoi testarlo.

• Firefox-Yahoo
• Internet Explorer-Yahoo

Variazioni tag font:

• diverse altezze di linea

• spaziatura carattere diverso parola

Per evitare questo, utilizzare sempre <span style=font-family: or <td style=font-family: ..

anche

Fix per Outlook e altri client di posta:!

<a href="#" style="color:#735a29 !important; text-decoration:none !important; "><span style="color:#735a29; text-decoration:none;>LINK 
</span></a> 

In questo caso, Outlook ignora importante, ma i client di posta elettronica non lo fanno. Ecco perché dovremmo ripetere la stessa dichiarazione CSS due volte e ancora sulla tecnica .. bulletproof!

Answer 8

Eseguo qualcosa di simile a ciò che @ user3408238 ha pubblicato, ma non ho mai trovato la necessità di utilizzare la proprietà in linea !important all'interno del codice HTML dell'email <body>. Se si imposta correttamente la cascata, non ce n'è davvero bisogno e la tua e-mail è a dismisura.

Ecco quello che faccio (che secondo me è molto più 'pulito') che funziona per me su tutto quanto segue:

• Webmail (Outlook.com, Yahoo, Gmail, Google Posta in arrivo)
• iOS su iPhone 5, iPhone 6, iPhone 6 plus e iPad Mini (client di posta nativo e app Gmail)
• Android 5+ (App Gmail e App Google Inbox) , Outlook 2010 e Outlook 2011 (Mac)

Nota sull'utilizzo di una classe pseudo per i collegamenti visitati
non si preoccupano impostare una classe pseudo stato visitato nel CSS incorporato. Outlook renderà questa pseudo classe "più generica" ​​(ad esempio a:visited), ma se è necessario specificare più di un colore, verrà sovrascritta da questa pseudo classe generica.

<style type="text/css" media="all"> 
    a:visited { color:#000000 !important; } /* most generic, will override the ones below */ 
    a.iOSlinks:visited { color:#ff0000 !important; } 
    #header a:visited { color:#0000ff !important; } 
</style> 

Anche se avete solo bisogno di un colore universale e Gmail non hai striscia fuori tutti i CSS incorporato, specificandolo nel CSS incorporato è ridondante se si imposta correttamente il CSS in linea e HTML.

1. Lascia la tua tag <a> un attributo style, definire la proprietà di colore e il valore (e tutte le altre proprietà che si desidera).
2. All'interno del tag <a>, avvolgere il collegamento di testo in un tag <span>.
3. Assegna al tag <span> una classe, assegna alla classe il colore esadecimale che include il segno di cancelletto (vedi sotto).

Non so perché, ma funziona, e questa tecnica non infrange nessun altro client di posta elettronica. Ho provato più combinazioni utilizzando numerose varianti di <a>, <span> e <font> tag, nessuno dei quali ha funzionato per tutti i client di posta elettronica.

Nota: si supponga che sia presente un URL effettivo e non un segnaposto.

<a href="#" target="_blank" style="color:#000000;"> 
    <span class="#000000">This is a link</span> 
</a> 

Ho un testo standard e-mail di sorta che DEMOS questo in questo jsFiddle link

Answer 9

ho avuto un gran casino con questo problema, ma ho trovato una bella soluzione.

Diciamo che si desidera rendere il legame rosso, senza uno stile speciale per una situazione hover:

a:link{color: red} 
a:visited{color: red} 
a:hover{color: red} 
a:active{color: red} 

Se si dimentica nessuno di questi 4 affermazioni o farlo in un altro modo questo potrebbe causare il tuo link styling non lavorare Funziona anche in un client Gmail.