解决Outlook中VML按钮文本前后多余空白问题

问题描述 #

需要创建一个显示文本“Confirm your email now”、点击跳转至Google网站的按钮。该按钮在部分Outlook版本中显示正常，但在其他版本中按钮文本前后出现多余空白。已尝试将margin和padding设为0，问题仍未解决，希望实现按钮文本前后无空白的效果，原代码如下：

<div>
    <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:50px;v-text-anchor:middle;width:260px;" arcsize="12%" stroke="f" fillcolor="#686262">
        <w:anchorlock/>
        <center>
            <span style="font-family:sans-serif;font-size:13px;font-weight:bold;color:#ffffff;line-height:50px;margin:0;padding:0;">Confirm your email now</span>
        </center>
    </v:roundrect>
    <![endif]-->
    <!--[if !mso]><!-->
    <a href="http://www.google.com" style="background-color:#686262;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:200px; margin: 0; padding: 0;">Confirm your email now</a>
    <!--<![endif]-->
</div>

不同Outlook版本显示效果：

解决方案 #

Outlook（尤其是基于Word渲染的版本）对HTML中的空白字符、容器默认样式处理特殊，以下修改可解决空白问题：

1. 消除代码换行导致的空白：Outlook会将HTML代码中的换行、缩进解析为空格，需把VML块内的代码压缩成无换行的结构，避免多余空格。
2. 重置标签的默认间距：Outlook的标签自带默认内边距，需显式设置margin:0;padding:0。
3. 统一按钮宽度：原代码中VML按钮宽度为260px，非MSO按钮为200px，统一宽度避免显示差异。

修改后的代码：

<div>
    <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:50px;v-text-anchor:middle;width:260px;" arcsize="12%" stroke="f" fillcolor="#686262"><w:anchorlock/><center style="margin:0;padding:0;"><span style="font-family:sans-serif;font-size:13px;font-weight:bold;color:#ffffff;line-height:50px;margin:0;padding:0;">Confirm your email now</span></center></v:roundrect>
    <![endif]-->
    <!--[if !mso]><!-->
    <a href="http://www.google.com" style="background-color:#686262;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:260px; margin: 0; padding: 0;">Confirm your email now</a>
    <!--<![endif]-->
</div>

额外优化建议 #

• 给标签添加display:block，确保文本填充整个容器宽度，避免两侧留白。
• 若仍有细微空白，可尝试给设置letter-spacing:0，强制取消字符间距。

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