如何为 Microsoft Outlook email 客户端的容器提供圆角？

Question

我一直在尝试为 email 设计创建一个徽章组件。 它看起来像这样： . 由于其圆角，它可以完美呈现除 Microsoft Outlook 以外的所有 email 客户端。 我知道 MSO 不支持border-radius所以我尝试使用如下所示的 VML：

    <span>
      {`<!--[if mso]>
          <v:roundrect
          xmlns:v="urn:schemas-microsoft-com:vml"
          xmlns:w="urn:schemas-microsoft-com:office:word"
          style="v-text-anchor:middle;height:20px;width:55px;"
          arcsize="50%"
          stroke="f"
          fillcolor="#EEEEEE">
            <w:anchorlock/>
            <center style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;line-height:20px;">`}
      {props.text}
      {`</center>
          </v:roundrect>
          <![endif]-->
          <!--[if !mso]><!-->`}
      <span className={`badge-${props.type}`} style={{ ...BADGE_STYLES, backgroundColor: bgColor }}>
        {props.text}
      </span>
      {'<!-- <![endif]-->'}
    </span>

现在我可以看到带有圆角但没有像这样的文本的组件： 宽度和高度是固定的。 如果我增加高度，我可以看到文本在那里，例如 但是对于所需的高度，它不存在，就像隐藏溢出一样。 我怎样才能在 MSO 中为组件实现所需的设计，或者我缺少什么？ 非常感谢您的帮助。 谢谢你。

Answer 1

MS Outlook 似乎在其“roundrect”渲染中需要最小填充。

因此，它可能比其他徽章大一点。

但是，你可以改进这一点。 您的行高为 20px，但字体大小为 12px。 它只有一行，所以这会产生一个间隙。 去掉它。

其次，您可以使用文本框和样式mso-fit-shape-to-text:true (HT: https://stackoverflow.com/a/48178955/8942566 ) 将<center>文本包装在 mso 中，所以它不会不会被剪掉，就像我的测试样本一样：

<!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="mso-wrap-style:none; mso-position-horizontal: center;height:20px;" arcsize="50%" stroke="f" fillcolor="#333333">
        <v:textbox style="mso-fit-shape-to-text:true">
        <center style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;color:#eeeeee">badge</center>
        </v:textbox>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
  <span style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;line-height:12px;border-radius:50px;background-color:#333333;color:#eeeeee;padding:3px 4px">
    badge
  </span>
  <!-- <![endif]-->

mso-position-horizontal: center; 是一种使文本在形状内居中的方法。