如何在Microsoft Outlook邮件客户端实现带圆角的徽章组件？

核心问题分析 #

Outlook的VML容器默认会裁剪超出自身范围的内容，再加上VML形状尺寸与文本容器的对齐、内边距配置不匹配，就会导致文本被遮挡。

具体修复步骤 #

1. 匹配VML形状与文本容器的尺寸及对齐 #

VML的width和height要和内部文本容器（如<td>）保持一致，同时配置关键属性避免文本被挤压：

<!-- [if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
  style="width:120px;height:32px;v-text-anchor:middle;"
  arcsize="16%"
  strokecolor="#2563eb"
  strokeweight="1px"
  fillcolor="#2563eb">
  <v:textbox inset="0px,4px,0px,4px">
    <center style="color:#ffffff;font-size:14px;font-family:Arial,sans-serif;">
      徽章文本
    </center>
  </v:textbox>
</v:roundrect>
<![endif]-->

关键配置说明：

• v-text-anchor:middle：让文本垂直居中，避免顶部或底部被裁剪
• inset：对应CSS的padding，给文本预留内边距，防止贴到VML边缘被遮挡

2. 分离Outlook与非Outlook的渲染逻辑 #

用条件注释隔离VML代码，非Outlook环境用标准CSS的border-radius，避免样式冲突：

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="background:#2563eb;color:#ffffff;font-size:14px;font-family:Arial,sans-serif;padding:4px 12px;border-radius:8px;">
      <!-- [if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
        style="width:120px;height:32px;v-text-anchor:middle;"
        arcsize="16%"
        strokecolor="#2563eb"
        strokeweight="1px"
        fillcolor="#2563eb">
        <v:textbox inset="0px,4px,0px,4px">
          <center>徽章文本</center>
        </v:textbox>
      </v:roundrect>
      <![endif]-->
      <!-- [if !mso]> -->
      徽章文本
      <!-- <![endif]-->
    </td>
  </tr>
</table>

注意：非Outlook环境的文本放在条件注释外，Outlook环境的文本放在VML的<v:textbox>内，避免重复显示。

3. 禁用不必要的CSS属性 #

不要给文本容器或父元素设置overflow:hidden，Outlook对该属性的处理逻辑和标准浏览器差异大，容易导致文本被意外裁剪。

4. 使用固定像素尺寸 #

Outlook对百分比尺寸支持不稳定，给VML和文本容器设置固定的像素宽高，确保布局一致性。

常见误区排查 #

• 未设置v-text-anchor:middle：文本默认顶在VML形状顶部，导致下半部分被裁剪
• inset值过大：内边距超出VML形状尺寸，挤压文本空间
• VML形状尺寸小于文本容器：文本超出VML范围被自动裁剪

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