如何阻止Outlook邮件表格中包含链接的td区域触发链接跳转？

你遇到的这个问题是Outlook 2016桌面版的经典渲染坑——它基于Microsoft Word的引擎处理HTML邮件，对链接元素的可点击区域计算存在偏差，哪怕链接没覆盖整个TD，点击TD的空白区域也会错误触发跳转。下面几个方案都是邮件开发中验证过有效的，你可以按需选择：

方案1：拆分TD，彻底隔离可点击区域 #

最稳妥的办法是把原有的单个TD拆成两个独立单元格：一个放带图片的链接，另一个保留红色背景作为不可点击区域。从结构上彻底分开两者，从根源避免误触发。

示例代码：

<!-- 原220px宽的TD拆分为两个 -->
<td style="box-sizing: border-box; font-family: Arial, sans-serif; background-color: red;" width="20"></td>
<td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right;" width="200">
  <a class="infos__link--img" href="https://www.google.com" style="background-color: green; box-sizing: border-box; font-family: Arial, sans-serif; display: inline-block; width: 100%;">
    <img alt="more info" src="https://wvw.naef.ch/l/881863/2021-02-15/n48v/881863/1613421727UpzRLznj/green_cta.png" style="box-sizing: border-box; font-family: Arial, sans-serif; max-width: 480px;" width="200">
  </a>
</td>

为什么有效：结构拆分后，红色背景区域是完全独立的不可点击单元格，所有邮件客户端都能正确识别，不会出现点击串线的情况。

方案2：给TD加不可点击的透明覆盖层 #

在TD内部加一个和TD尺寸一致的透明块级元素，放在链接的下方，阻止点击事件传递到链接。要注意添加Outlook专属的mso-pointer-events:none属性，确保它被识别为不可点击元素。

示例代码：

<td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right; background-color: red; position: relative;" width="220">
  <!-- 铺满TD的不可点击透明层 -->
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; mso-pointer-events: none; background-color: transparent;"></div>
  <a class="infos__link--img" href="https://www.google.com" style="background-color: green; box-sizing: border-box; font-family: Arial, sans-serif; display: inline-block; width: 200px; position: relative; z-index: 1;">
    <img alt="more info" src="https://wvw.naef.ch/l/881863/2021-02-15/n48v/881863/1613421727UpzRLznj/green_cta.png" style="box-sizing: border-box; font-family: Arial, sans-serif; max-width: 480px;" width="200">
  </a>
</td>

为什么有效：透明覆盖层占满整个TD，mso-pointer-events:none告诉Outlook不要把它当成可点击元素；同时给链接设置更高的z-index，确保图片区域的正常点击不受影响。

方案3：用VML针对Outlook做专属修复 #

Outlook支持VML（微软矢量标记语言），我们可以用它创建一个不可点击的透明形状覆盖TD空白区域，这是邮件开发里对付Outlook怪毛病的常用技巧。

示例代码：

<td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right; background-color: red; position: relative;" width="220">
  <!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position:absolute; width:220px; height:100%; top:0; left:0; z-index:0;">
    <v:fill color="#ff0000" opacity="0%" />
  </v:rect>
  <![endif]-->
  <a class="infos__link--img" href="https://www.google.com" style="background-color: green; box-sizing: border-box; font-family: Arial, sans-serif; display: inline-block; width: 200px; position: relative; z-index: 1;">
    <img alt="more info" src="https://wvw.naef.ch/l/881863/2021-02-15/n48v/881863/1613421727UpzRLznj/green_cta.png" style="box-sizing: border-box; font-family: Arial, sans-serif; max-width: 480px;" width="200">
  </a>
</td>

为什么有效：通过<!--[if mso]-->条件注释，只有Outlook会加载这个VML矩形。它覆盖整个TD，填充色设为红色且完全透明，既不影响视觉效果，又能阻止空白区域的点击事件传递给链接；链接的z-index更高，保证图片区域正常可点。

方案4：调整链接尺寸与对齐方式 #

如果不想修改结构，可以试试把链接的宽度改成图片的实际宽度（200px），用margin-left:auto让它右对齐，确保链接只覆盖图片区域，而不是整个TD。

示例代码：

<td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right; background-color: red;" width="220">
  <a class="infos__link--img" href="https://www.google.com" style="background-color: green; box-sizing: border-box; font-family: Arial, sans-serif; display: inline-block; width: 200px; margin-left: auto;">
    <img alt="more info" src="https://wvw.naef.ch/l/881863/2021-02-15/n48v/881863/1613421727UpzRLznj/green_cta.png" style="box-sizing: border-box; font-family: Arial, sans-serif; max-width: 480px;" width="200">
  </a>
</td>

注意：这个方法在部分Outlook版本中可能仍有不稳定的情况，建议结合方案1或2一起使用，确保兼容性。

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