Liens identiques dans Outlook Email: pourquoi un seul affichage est-il une URL valide?

Question

Le système sur lequel je travaille génère des e-mails à destination de l'utilisateur. Ceux-ci sont créés en chargeant à partir d'un modèle, puis en remplissant les espaces réservés dans le texte avec les informations appropriées.

Plusieurs de ces courriels comportent un lien vers le site Web du système. Cela se présente sous deux formes: un lien souligné en texte normal et un faux-bouton.

Lorsque le système envoie des e-mails à mon compte Hotmail, les deux fonctionnent. Toutefois, lorsque le même courrier électronique est envoyé à Outlook 2007, seul le lien texte fonctionne. Si vous passez la souris sur le bouton, il affiche une URL vierge de "http: //" qui, si vous cliquez dessus, ouvre une nouvelle fenêtre de navigateur.

En examinant le code HTML généré, les deux liens ont une destination valide.

<td width="160" align="center" valign="middle"> 
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="mobile_hide"> 
     <tbody> 
      <tr> 
      <td width="560" align="left" valign="top" style="font-size:14px; color:black; padding-bottom: 80px;">Please <a href="[valid link to site, with large querystring]" style="color: #009ddb; text-decoration: underline">choose a new password here</a>.</td> 
      </tr> 
     </tbody> 
    </table> 
    </td> 
    <td width="280" align="center"> 
    <table width="280" border="0" cellpadding="0" cellspacing="0" align="center"> 
     <tr> 
      <td width="280" align="center" valign="middle" style="color: #FFFFFF; background-color:white; width:280px"> 
       <div> 
        <!--[if mso]> 
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:280px;" arcsize="63%" strokecolor="#32b8eb" fill="t"> 
        <v:fill type="tile" /> 
        <w:anchorlock/> 
        <center style="color:black;font-size:16px;width:280px;font-family:Calibri;">RESET YOUR PASSWORD NOW</center> 
        </v:roundrect> 
        <![endif]--><a href="[valid link to site, with large querystring]" style="border:1px solid #32b8eb; border-radius:25px;display:inline-block;font-size:16px;line-height:50px; text-align:center; text-decoration:none;height:50px;width:280px;-webkit-text-size-adjust:none;mso-hide:all;color:black;">RESET YOUR PASSWORD NOW</a> 
       </div> 
     </td> 
    </tr> 
</table> 
</td> 

Pourquoi l'email du bouton n'est-il pas affiché correctement dans Outlook? Il ne peut pas s'agir d'une fonction de sécurité générale, car le lien texte fonctionne correctement.

Answer 1

Je devine que le second href est celui qui ne fonctionne pas. La raison en est que vous avez en réalité trois hrefs, mais seulement deux fermetures </a>. le second dans le code spécifique à Outlook manque d'une balise de fermeture et interfère avec le href du bas.

<!--[if mso]> 
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:280px;" arcsize="63%" strokecolor="#32b8eb" fill="t"> 
    <v:fill type="tile" /> 
    <w:anchorlock/> 
    <center style="color:black;font-size:16px;width:280px;font-family:Calibri;">RESET YOUR PASSWORD NOW</center> 
    </v:roundrect> 
<![endif]--> 

Plus précisément, il est cette ligne: <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:280px;" arcsize="63%" strokecolor="#32b8eb" fill="t">

Fermer ou supprimer l'énoncé dans le code Outlook. Il ne fait rien en ce moment, sauf interférer avec votre fond href. Votre bas href devrait commencer à travailler.

Bonne chance.

Modifier

href spécifique à Outlook se ferme par </v:roundrect>. Un supplément de </a> n'est pas nécessaire. Je pense que le code vient de https://buttons.cm. Le comportement attendu consiste à placer une URL sur un graphique de bouton que vous pouvez utiliser comme solution de repli, quelque chose comme https://buttons.cm/button.jpg. Comme il n'y avait pas d'URL et juste un http://, je pense que c'est toujours ce qui a causé le problème avec Outlook. Si j'avais tout le code, je le testerais, mais pas moi. Je voulais juste ajouter ceci à ma solution pour aider toute personne rencontrant un problème similaire à une solution mieux pensée.