HTML dilemme de lien de courrier électronique
J'ai conçu un courrier électronique HTML et les problèmes suivants se posent: D'abord, tout mon design est basé sur une couleur bleue, de sorte que tout texte bleu ne sera pas lisible par le lecteur/utilisateur, le texte doit être blanc . GMAIL colorie automatiquement le téléphone chiffres et liens bleus mais le problème principal est Microsoft Outlook OWA.
Pour corriger le numéro de téléphone et la coloration des liens dans GMAIL, j'ai procédé comme suit:
<a style="color: #FFFFFF;
text-decoration: none"
href="#/">
<span style="color: #FFFFFF;
text- decoration: none">
1800-000-0000
</span>
</a>
Cela fonctionne parfaitement pour GMAIL et partout, MAIS j'ai mentionné que la plupart de mes clients utilisent Outlook ou MS OWA (application Web Outlook).
OWA ignore la couleur que j'ai définie dans mon style en ligne et rend le lien bleu par défaut; cela ne se produit que lorsque l’e-mail est prévisualisé. Si vous ouvrez réellement l'email, tous les styles entrent en jeu.
Mon dilemme est, que dois-je faire? J'ai déjà abandonné tout espoir mais ceci est mon dernier recours. Existe-t-il un moyen de remplacer la couleur du lien pour Outlook OWA? J'ai utilisé! IMPORTANT, la balise FONT, NESTING au degré 5.
Le problème ici n'est pas Outlook mais OWA.
Voici une capture d'écran lorsque j'inspecte l'élément dans Chrome:
Et voici FF:
Des idées?
S'il vous plaît!
Vous trouverez le succès en incluant la déclaration <font>, qui est déconseillée dans le langage HTML moderne, bien que certaines versions d’OWA le respectent toujours:
<a style="color: #FFFFFF; text-decoration: none" href="#/"><span style="color: #FFFFFF; text- decoration: none"><font color="#FFFFFF">1800-000-0000</font></span></a>
Les couleurs des liens Outlook Web App (OWA) changent des styles en ligne . J'ai passé quelques heures à essayer de modifier/corriger les couleurs des liens dans OWA, ce qui supprime les styles en ligne des modèles de courrier que je crée. J'ai essayé diverses techniques avec + tags sans succès . Enfin, j'ai trouvé quelque chose qui semble fonctionner:
<a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>
Changé pour:
<a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>
Semble bien jusqu'à présent.
D'autres tests. Je mets la couleur légèrement éteinte sur le <td style="color:#FFFFF6;"> puis la couleur correcte sur le <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">
C'est un bug connu avec Outlook que si une balise d'ancrage ne contient pas une URL valide, le style de cette balise sera ignoré.
La tendance à ajouter! Important fonctionnera également contre vous dans ce cas, car Outlook ignorera complètement les balises suffixées avec! Important.
Placez une URL sur votre balise d'ancrage ou placez le texte dans une balise span à l'intérieur de l'ancre et mettez-y votre style.
J'ai pu résoudre ce problème en plaçant une table dans la balise a.
<a href="">
<table>
<tr>
<td style="color: #FFFFFF">Link text here</td>
</tr>
</table>
</a>
Les chiffres. Juste au moment où nous nous sommes habitués à ne pas être en mesure d'utiliser les nouvelles astuces de messagerie parce qu'Outlook ne les prend pas en charge, Microsoft nous envoie OWA, avec toute une série de nouveaux bogues.
Nous avons contourné son style de lien épouvantable en appliquant un display:inline-block au lien. Ceci au moins élimine le soulignement. Je ne sais pas pourquoi.
Nous avons rencontré un autre bogue lorsque nous avons essayé de donner à nos liens un style de la même couleur que l’élément parent. Pour une raison quelconque, la modification de la couleur de l'élément parent l'a corrigée. Le changer d'un caractère vers le haut ou vers le bas vous donne généralement une couleur assez proche.
<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>
J'ai utilisé ce qui suit et cela a bien fonctionné dans Outlook 2007, 2010, 2013 et Outlook.com. Je vais vérifier avec OWA bientôt.
#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>
J'ai vu ce fil et essayé les options ci-dessus. Le TD hack a fonctionné avec la modification du code hexadécimal, mais je suis tombé sur une solution intéressante si quelqu'un veut essayer:
<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>
La définition de DIV sur text-decoration NONE a été prise en charge par OWA. Personnellement, on m'a demandé de supprimer le soulignement, donc pour moi c'est parfait.
J'espère que les gens trouveront cela utile. Merci à tous ceux qui ont ajouté leurs solutions.
Lors de l’envoi d’emails HTML, il est recommandé de s’en tenir aux anciens codes HTML3 et HTML4 . Les clients de messagerie ne fonctionnent pas bien avec CSS2 et les versions ultérieures. Les CSS en ligne fonctionnent beaucoup mieux.
Au lieu de:
<a style="color: #FFFFFF; text-decoration: none" href="#/">
<span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a>
En passant, vous avez des erreurs de syntaxe dans cette ligne. Après chaque déclaration CSS, vous avez besoin d'un;
Corrigée:
<a style="color: #FFFFFF; text-decoration: none;" href="#">
<span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a>
Essaye ça:
<a color="#FFFFFF" text-decoration="none" href="#">
1800-000-0000
</a>
N'oubliez pas de spécifier la version HTML sur le DOCTYPE.
Je me suis retrouvé à travailler dans les deux côtés de cette situation ..__ J'ai travaillé sur un client de messagerie basé sur le Web en utilisant PHP avec IMAP, j'ai dû effacer les emails HTML De beaucoup de choses parce qu'ils ' d pas casser non seulement la mise en page de l'application mais également le comportement prévu des boutons et des formulaires Comment? vous pourriez demander. Avec un client De bureau, cela ne poserait probablement pas de problème, mais avec le chargement d’un client de messagerie basé sur le Web Des fichiers css/js externes peuvent donner lieu à un très grand nombre de pièges potentiels et de bugs désagréables.
À une autre occasion, je travaillais sur des invitations de mariage envoyées par e-mail HTMl, .__ La quantité de CSS en ligne que nous devions faire était ridicule. Pour que cela fonctionne, vous devez utiliser principalement HTML3 et peut-être un peu HTML4, mais pas trop.
Je vous recommande d'expérimenter avec des tableaux et des CSS en ligne HTML3 obsolètes.
<a href="#" style="color: #FFF;"><strong style="color: #FFF; font-weight: normal;">Example Link</strong></a>
cela a fonctionné pour moi! Assurez-vous d'utiliser <strong>, je l'ai essayé avec d'autres balises, mais cela n'a pas fonctionné.
Cette question est toujours d'actualité à compter d'aujourd'hui 21-12-2017. Je n'ai eu aucun problème avec mon code dans Outlook, Gmail mais pas dans Outlook Web App. J'ai dû utiliser cette balise obsolète pour le résoudre.
<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>
Il était étrange que le style dans l'hyperlien NE FONCTIONNE PAS pour Outlook Web App (OWA); par conséquent, l'ajout de <font color="#ff6600 !important;"> a fonctionné! Etrange mais c'est comme ça que Microsoft veut nous taquiner!
En fait, OWA supprime tous les styles de l'a-tag, y compris celui du span-tag que vous avez inclus. Vous pouvez ajouter des styles dans la partie tête, mais encore une fois, OWA ignore cela pour les liens hypertexte. J'ai ajouté un style pour a, a: link, a: visité dans la tête, la même couleur que dans l'a-tag et le span-tag inclus. Le résultat? Mon linktext est coloré, mais le soulignement est toujours le bleu par défaut . L'indice: il n'y a pas d'indice pour moi.
Essayez d’ajouter une classe my-link à chaque lien en question et le code CSS suivant dans votre balise style:
.my-link a,
a[x-Apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
Cela couvre généralement les choses pour moi. Si cela échoue, il existe une version plus lourde de ce code ici:
.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;
}