Outlookの同一リンク - なぜ1つのURLのみが有効なURLとしてレンダリングされますか？

Question

私が作業しているシステムは、ユーザーに電子メールを生成します。これらは、テンプレートから読み込んでテキストのプレースホルダに適切な情報を埋め込むことで作成されます。

これらのメールの多くは、システムウェブサイトへのリンクを特徴としています。これは、通常のテキストの下線付きリンクと偽のボタンの2つの形式で表示されます。

私はシステムが自分のホットメールアカウントに電子メールを送信すると、どちらも機能します。ただし、Outlook 2007に同じ電子メールが送信されると、テキストリンクのみが機能します。ボタンの上にマウスを移動すると、空のURL「http：//」が表示されます。このURLをクリックすると、新しいブラウザウィンドウが開きます。

生成されたHTMLを調べると、両方のリンクに有効な宛先があります。

<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> 

Outlookでボタン電子メールが正しく表示されないのはなぜですか？テキストリンクが正常に機能するので、一括セキュリティ機能にすることはできません。

Answer 1

私は2番目のhrefがうまくいかないと推測しています。その理由は、あなたは実際には3つの輪郭を持っていますが、閉じているのは2つの</a>タグだけです。 Outlook固有のコードの2番目のコードには終了タグがなく、下部のhrefと干渉します。

<!--[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]--> 

具体的には、この行です：<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">

閉じる

またはOutlookのコード内でステートメントを削除してください。あなたの下のhrefを妨害することを除いて、今は何もしていません。あなたの一番下のhrefが働き始めるはずです。

幸運。

編集

見通し固有のhrefは</v:roundrect>によって閉じられます。余分な</a>は必要ありません。私はコードがhttps://buttons.cmから来ると思う。予想される動作は、代替画像として使用できるボタングラフィックにURLを配置することです（https://buttons.cm/button.jpgなど）。 URLがなく、ちょうどhttp://なので、これはまだOutlookの問題を引き起こしていると思います。もし私がすべてのコードを持っていれば、私はそれをテストするだろうが、私はしない。私はこれを私の修正に加えて、同様の問題を経験している人にはより良い考え方のソリューションを手助けしたいと思っていました。