web-dev-qa-db-fra.com

Comment supprimer le lien de lien dans mon email HTML?

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;">BOOK NOW
    </a>
</td>

J'ai utilisé ce code pour créer un lien dans mon email HTML. Cela fonctionne bien dans les navigateurs et dans Outlook, mais dans GMail, Hotmail et ymail, les liens sont soulignés.

Quelqu'un peut-il m'aider à me débarrasser de cela?

htmlcsshtml-emailnewsletteremail-client
21
pubudumj
<a href="#" style="text-decoration:none !important; text-decoration:none;">BOOK NOW</a>

Outlook supprimera le style avec la balise !important laissant le style normal, donc pas de soulignement. La balise !important remplacera le style par défaut des clients de messagerie basés sur le Web, ne laissant ainsi aucun soulignement.

27
Nathaniel Hoyt

Je vois que cela a été répondu; Cependant, j'estime que ce lien fournit des informations appropriées sur le formatage pris en charge par divers clients de messagerie.

http://www.campaignmonitor.com/css/

Il est intéressant de noter que GMail et Outlook sont deux des plus difficiles à formater pour le courrier électronique HTML.

7
Kennith Nichol

Je pense que si vous mettez un style span après la balise <a> avec text-decoration:none, cela fonctionnera dans la majorité des navigateurs/clients de messagerie.

Un péché:

<a href="" style="text-decoration:underline">
    <span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>
2
Ricardo

Une autre façon de tromper Gmail (pour les numéros de téléphone): utilisez un ~ au lieu d'un -

404-835-9421 -> 404 ~ 835 ~ 9421

Cela vous épargnera (ou des utilisateurs moins avertis ;-) le voyage dans le sens html.

J'ai trouvé un autre moyen de supprimer les liens dans Outlook que j'ai testé jusqu'à présent. Si vous créez une classe vide, par exemple dans votre css, dites .blank {}, puis procédez comme suit pour vos liens, par exemple:

<a href="http://www.link.com/"><span class="blank" style="text-decoration:none !important;">Search</span></a>

cela a fonctionné pour moi, espérons-le, cela aidera quelqu'un qui a encore du mal à éliminer le soulignement des liens dans Outlook. Si quelqu'un a une solution de contournement pour gmail, pourriez-vous m'aider à tout essayer dans ce fil, rien ne fonctionne.

Merci

2
Bryan Labuschagne

Utilisez! Important dans la règle de décoration de texte. <a href="#" style="text-decoration:none !important;"> RÉSERVER </a>

2
TechyTee

Après une demi-journée de réflexion sur cette question (et deux ans après l’ouverture de cette question), j’ai trouvé une réponse complète à cette question.

<a href="#"><font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font></a>

(Vous avez besoin de la propriété text-underline sur l'étendue à l'intérieur du lien et de la balise font pour modifier la couleur)

2
Tommy Bickerdike

J'ai ajouté les deux déclarations sur le href qui fonctionnait dans les applications Outlook et Gmail. Outlook ignore l’important et Gmail en a besoin. Les versions Web de courrier électronique fonctionnent avec les deux /.

text-decoration: none !important; text-decoration: none;
1
Steven Collins

J'ai utilisé une combinaison de non-présentation de liens dans Google, d'ajout de liens pour mso (Outlook) et de balises timides, afin de conserver l'aspect et la convivialité de mon entreprise. Certains codes peuvent être redondants (pour mon entreprise, les apparences étaient plus importantes que la partie sur laquelle il était possible de cliquer. Cela ressemblait à un puzzle, car chaque modification freine autre chose)

<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www&shy;.&shy;immothekerfinotheker&shy;.&shy;be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>

J'espère que cela aide quelqu'un

1
Tom Leppens

Pour "masquer" complètement le soulignement pour <a> à la fois dans l'application de messagerie et dans le navigateur Web, vous pouvez procéder comme suit.

<a href="..."><div style="background-color:red;">
    <span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>

  1. La couleur dans le 1er <span> est celle dont vous n’avez pas besoin,DOITdoit être identique à la couleur de fond. (rouge ici)

  2. La couleur en 2e <span> est celle du texte de votre bouton. (blanc ici)

1
Jeffrey Neo

Tous les clients de messagerie ajustent le code HTML et CSS que vous fournissez en fonction de leurs propres règles:

Par exemple: gmail supprime tout sauf le code HTML interne de la balise body .

1. pour la plupart des autres clients, vous pouvez avoir une étiquette de style dans votre en-tête

<style type="text/css">
    a {text-decoration: none !important;}
</style>

Remarque: n'utilisez pas de commentaires CSS car YAHOO! Mail pourrait causer des problèmes.

2. pour être du côté de la sauvegarde, ajoutez le même code en ligne dans la balise A que vous avez fait et une balise span supplémentaire (les règles de style d'une balise sont souvent supprimées)

<a href="" style="text-decoration: none !important;">
    <span style="text-decoration: none !important;">
        text
    </span>
</a>
1
retrovertigo

Vous pouvez faire un "style redondant" et cela devrait résoudre le problème. Vous utilisez le même style que sur le, mais vous l'ajoutez à celui qui se trouve dans le.

Exemple:

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;"><span style="color:#000000; text-decoration:none;">BOOK NOW</span></a>
</td>
0
Tom

Tout dépend du client de messagerie s'il souhaite ou non afficher le soulignement sous le lien. À partir de maintenant, les styles du corps ne sont pris en charge que par:

  • Outlook 2007/10/13 +
  • Outlook 2000/03
  • Apple iPhone/iPad
  • Outlook.com
  • Apple Mail 4
  • Yahoo! Mail bêta

http://www.campaignmonitor.com/css/

0
Anshu Dwibhashi

Code comme les lignes ci-dessous a fonctionné pour moi dans le client Web Gmail. Un lien noir non souligné est apparu dans l'e-mail. Je n'ai pas utilisé la balise imbriquée span.

<table>
  <tbody>
    <tr>
        <td>
            <a href="http://hexinpeter.com" style="text-decoration: none; color: #000000 !important;">Peter Blog</a>
        </td>
    </tr>
  </tbody>
</table>

Remarque: Gmail supprimera les styles en ligne incorrects. Par exemple. le code comme la ligne ci-dessous aura ses styles en ligne tous enlevés.

<a href="http://hexinpeter.com" style="font-family:; text-decoration: none; color: #000000 !important;">Peter Blog</a>
0
hexinpeter

Ici dans http://www.campaignmonitor.com/css/ , une bonne explication pour dire que c'est restreint! Et un joli guide sympa pour connaître toutes les limitations de CSS dans les clients de messagerie.

0
Exception

Dans Windows 10 Mail, vous devrez peut-être les ajouter à votre tête HTML:

<!--[if (mso)|(mso 16)]>
  <style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
  </style>
<![endif]-->

Le 'a {text-decoration: none;}' corrige les problèmes de soulignement :)

0
Nereus Eng Wei Xian

Tout en consultant l’email HTML, essayez d’inspecter l’élément sur ce lien et de voir ce qui le remplace. Utilisez cette classe et définissez-la à nouveau dans votre style de tête, puis définissez la décoration du texte: aucune! Important;

Dans mon cas, ce sont les classes qui écrasent mon style en ligne, donc elles ont été déclarées comme ceci en tête de mon courrier électronique HTML et ont défini le style que je veux implémenter. 

Cela a fonctionné pour moi, j'espère que cela fonctionnera aussi pour vous.

.ii a[href]{
text-decoration: none !important;
}

#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}   

#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}
0
vonnshy

--INFORMATION DE LOIN LOIN--

tout ce que vous avez à faire; 

<a href="" style="text-decoration:#none; letter-spacing: -999px;">

0
Ömer Doğan

Utiliseztext-decoration:none !important;au lieu detext-decoration:none;pour vous assurer de "perdre" le soulignement.

0
user1647234

J'ai copié ma page html et collé dans Word . J'ai modifié la signature dans Word en supprimant les espaces où le soulignement est placé pour créer ma propre barre d'espacement "padding" . .Worked bien pour moi.

0
Ewerton

La décoration du texte ne fonctionnait pas pour moi, alors j'ai trouvé un email dans Outlook qui ne contenait pas la ligne et j'ai vérifié le code:

<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>

Celui-ci travaille pour moi.

0
Dr. Aaron Dishno