电子邮件客户端上的按钮看上去很挤

Question

我正在使用以下代码创建按钮：

    <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td style="border-radius: 2px;" bgcolor="#1AB394">
                        <a href="https://www.example.com" target="_blank" style="padding: 8px 12px; border: none; border-radius: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; text-decoration: none; font-weight: normal; display: inline-block;">
                            CONFIRM ACCOUNT             
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </table>

该按钮用于电子邮件。当我发送电子邮件时，该按钮在网络邮件客户端上看起来不错：

但是在其他邮件客户端（例如Outlook）上看起来不正确：

有人可以帮忙吗？谢谢。

Answer 1

您可能想看看以下内容：

outlook-rendering-issues

第3项。

我无法测试其中的任何一个，因为我不使用Outlook作为客户端，但是它们似乎暗示您可能需要比起使用td来封装标签。看起来几乎没有像您在样式中那样将标签视为内联块。如果您添加：

padding: 8px 12px;

附带的td可能会修复按钮的外观。