为何Outlook与Thunderbird中PHPMailer发送的邮件按钮显示不一致？

你遇到的是Outlook桌面版（基于Word渲染引擎）对现代CSS支持有限导致的按钮样式失效问题——即使使用内联CSS，border-radius、display: inline-block这类属性在Outlook里也可能不生效，同时a标签的padding和宽度设置也容易出现偏差。

解决方案：采用VML+HTML混合兼容结构 #

Outlook支持VML（矢量标记语言），我们可以通过条件注释为Outlook单独渲染按钮的VML代码，其他客户端保留标准HTML样式，同时调整布局避免样式冲突。

修改后的完整代码 #

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
  <tr>
    <td bgcolor="#ffffff" align="left">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#ffffff" align="left" style="padding: 10px 40px 30px 40px;">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <!-- 接受按钮 -->
                <td width="120px" align="center" style="border-radius: 5px;" bgcolor="#1FD67D">
                  <!--[if mso]>
                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://test.com/index.php?accept_id=%accept_unique_url%" style="height:50px;v-text-anchor:middle;width:120px;" arcsize="10%" stroke="f" fillcolor="#1FD67D">
                    <w:anchorlock/>
                    <center style="color:#ffffff;font-size:20px;font-family:Helvetica, Arial, sans-serif;">Accepteren</center>
                  </v:roundrect>
                  <![endif]-->
                  <!--[if !mso]><!-->
                  <a href="https://test.com/index.php?accept_id=%accept_unique_url%" target="_blank" style="font-size:20px;font-family:Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none;display:inline-block;padding:15px 25px;width:120px;text-align:center;">
                    Accepteren
                  </a>
                  <!--<![endif]-->
                </td>
                <td width="20px">&nbsp;</td>
                <!-- 拒绝按钮 -->
                <td width="120px" align="center" style="border-radius: 5px;" bgcolor="#F2828D">
                  <!--[if mso]>
                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://test.com/index.php?decline_id=%decline_unique_url%" style="height:50px;v-text-anchor:middle;width:120px;" arcsize="10%" stroke="f" fillcolor="#F2828D">
                    <w:anchorlock/>
                    <center style="color:#ffffff;font-size:20px;font-family:Helvetica, Arial, sans-serif;">Afwijzen</center>
                  </v:roundrect>
                  <![endif]-->
                  <!--[if !mso]><!-->
                  <a href="https://test.com/index.php?decline_id=%decline_unique_url%" target="_blank" style="font-size:20px;font-family:Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none;display:inline-block;padding:15px 25px;width:120px;text-align:center;">
                    Afwijzen
                  </a>
                  <!--<![endif]-->
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关键细节说明 #

• 条件注释<!--[if mso]>：仅Outlook会解析这部分代码，用VML的<v:roundrect>创建带圆角的按钮，arcsize="10%"对应原代码的5px圆角（按钮高度50px的10%）。
• 非Outlook客户端：使用标准HTML的a标签，保留原样式逻辑，确保Thunderbird等客户端显示正常。
• 样式优化：移除了重复的样式声明，VML里的v-text-anchor:middle实现垂直居中，对应HTML里的padding垂直居中效果。

额外注意 #

Outlook桌面版原生不支持CSS的border-radius，必须通过VML的arcsize属性模拟圆角效果；测试时可直接用Outlook 365桌面版验证，或借助邮件测试工具（如Mailtrap）确认多客户端显示一致性。

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