新版Outlook锚标签显示异常求助：URL与锚文本同时展示

问题场景：
制作的HTML邮件模板在浏览器、移动端显示正常，但**新版Outlook（Mail Outlook）**中，锚文本会和对应的href URL一同展示，旧版Outlook显示正常。

原代码片段：

<table class=""  align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:230px;" width="100%">
  <tr>
    <td class="" valign="top" style="padding: 10px; display: block;">
      <a target="_blank" href='*|ARCHIVE|*' style="display: block;" >View email in your browser</a>
    </td>
  </tr>
</table>

显示差异：

• 新版Outlook：锚文本“View email in your browser”后紧跟解析后的完整URL，两者同时显示
• 旧版Outlook：仅显示锚文本“View email in your browser”

修复方案 #

方案1：移除块级显示样式

新版Outlook的WebView2渲染引擎对设置了display:block的<a>标签会触发自动显示URL的逻辑，同时父<td>的display:block也会干扰表格布局渲染。直接移除这两个样式即可：

<table class="" align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:230px; width:100%;">
  <tr>
    <td class="" valign="top" style="padding: 10px;">
      <a target="_blank" href='*|ARCHIVE|*' style="text-decoration: underline; color: #0066cc;" >View email in your browser</a>
    </td>
  </tr>
</table>

方案2：保留块级效果但改用inline-block

如果需要让链接占满单元格宽度（块级显示效果），可以将<a>的display:block替换为display:inline-block并设置width:100%，避免触发URL自动显示：

<table class="" align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:230px; width:100%;">
  <tr>
    <td class="" valign="top" style="padding: 10px;">
      <a target="_blank" href='*|ARCHIVE|*' style="display: inline-block; width: 100%; text-decoration: underline; color: #0066cc;" >View email in your browser</a>
    </td>
  </tr>
</table>

原因说明 #

新版Outlook采用WebView2作为渲染引擎，和旧版Outlook的桌面渲染逻辑存在差异。当<a>标签被设置为display:block时，引擎会自动附加href对应的URL文本到锚文本之后，而inline或inline-block模式则不会触发该行为。

内容的提问来源于stack exchange，提问作者Bhavin