Outlook中HTML邮件按钮无内边距，如何让边框与上方按钮内边距一致

解决方案 #

针对HTML邮件同时兼容Outlook不支持border-radius、其他客户端需要圆角边框的需求，可通过MSO条件注释做差异化适配，具体修改逻辑如下：

• 仅给Outlook单独在外层td加边框，其他客户端依然保留a标签上的边框+圆角属性，同时对齐两边的内边距表现
• 修正现有代码里的mso属性错位问题：当前mso-padding-alt设为4px会导致Outlook内边距异常，需和普通padding值保持一致；mso-border-alt值8px和实际3px边框不符，也需同步修正
• 用条件注释包裹Outlook专属样式，不会影响其他邮件客户端的渲染效果

修改后的完整代码如下：

<!-- BUTTON -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="fluid" 
    role="presentation" width="600">
    <tr>
        <td align="center" bgcolor="#ffffff" style="padding: 0 0 40px 0;" 
            valign="top">
            <table align="center" border="0" cellpadding="0" cellspacing="0" 
                class="main-button-mob-width" role="presentation"
                    style="max-width: 80%; min-width: auto;">
                <tr>
                    <!--[if mso]>
                    <td align="center" bgcolor="#ffffff" 
                        class="out-main-button-padding" 
                        style="border: 3px solid #061539; padding: 0; font-family: 
                        'Arial Black', Gadget, Arial, 
                        Helvetica, sans-serif; font-size: 18px; font-weight: bold; 
                        line-height: 22px; mso-text-raise: 4px;"
                        valign="top">
                    <![endif]-->
                    <!--[if !mso]><!-->
                    <td align="center" bgcolor="#ffffff" 
                        class="out-main-button-padding" 
                        style="border-radius: 50px; padding: 0; font-family: 
                        'Arial Black', Gadget, Arial, 
                        Helvetica, sans-serif; font-size: 18px; font-weight: bold; 
                        line-height: 22px; mso-text-raise: 4px;"
                        valign="top">
                    <!--<![endif]-->
                        <a class="out-main-button-a"
                            href="#" style="display: block; 
                            border-radius: 50px; background-color: #ffffff; 
                            /* 非Outlook客户端显示a标签边框 */
                            border: 3px solid #061539; 
                            mso-border-alt: none; 
                            padding: 15px 35px 15px 35px; 
                            /* Outlook内边距和普通值对齐 */
                            mso-padding-alt: 15px 35px 15px 35px; 
                            color: #061539; text-decoration: none;"
                            target="_blank" title="">
                            <span style="color: #061539; text-decoration: none; 
                                background-color: #ffffff">INVITA A TUS AMIGOS
                            </span>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- BUTTON end -->

修改后可实现：Outlook环境下显示外层td的3px边框，内边距和上方按钮完全一致；其他支持border-radius的邮件客户端显示a标签的圆角边框，内边距也和需求对齐，无兼容冲突。

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