html - Outlook.com 中的按钮文本对齐方式

Question

仅在 outlook.com 中发现一个奇怪的行为，其中包含用于电子邮件构建的按钮文本对齐方式。由于某种原因，它与按钮的顶部对齐，而不是在中间。想不通这是为什么。任何见解表示赞赏。

感谢您的时间和想法。

下方的代码片段和 CTA 图片链接。

    <table cellpadding="0" cellspacing="0" border="0"  >
     <tr>
      <td style="padding: 0px 0px 0px 0px;  background-color:#989b98; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#e4008f; cursor: pointer; display: block; min-height: 45px; vertical-align: middle; min-width: 220px;" align="center" valign="middle"><a href="#" style="text-decoration:none; padding: 12px 20px 10px 20px;  background-color:#989b98; color:#e4008f; cursor: pointer; display: block; border: 1px solid #989b98; min-width: 220px; font-weight: bold;  outline: none;" target="_blank">16pxXXXX XXXXX XXXXX</a></td>
     </tr>
    </table>

Answer 1

我首先会回顾 this asset任何与“电子邮件”相关的内容，以便了解不同的电子邮件客户端如何对 CSS 作出 react 。

您会注意到 Outlook 如何不支持 display，这将导致您的 anchor 标记无法使用填充。我建议按以下方式对电子邮件按钮进行编码:

<table cellpadding="0" cellspacing="0" border="0">
<tbody>
    <tr>
        <td align="center" valign="middle" bgcolor="#989b98" style="padding: 12px 20px; font-family: 'Arial', Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
            <a href="#" style="color: #e4008f; text-decoration: none; outline: none; border: none;" target="_blank">16pxXXXX XXXXX XXXXX</a>
        </td>
    </tr>
</tbody>
</table>

不幸的是，这只会使文本可点击，而不是整个按钮，但它会是您的最佳选择，以便在无需创建图像的情况下使其在所有其他电子邮件客户端中保持一致。