如何通过行内样式修复HTML邮件表格内嵌套链接的显示问题

核心修改逻辑 #

所有调整均使用行内样式实现，兼容主流邮件客户端：

• 按钮所属嵌套表格新增align="center"属性，保证按钮组整体在灰色容器内居中
• 两个按钮所在的td分别设置左右内边距生成间距：左侧td加padding-right: 18px，右侧td加padding-left: 18px，避免使用兼容性差的margin属性
• 两个<a>标签统一添加属性保证样式一致：
  • 新增width: 290px固定按钮宽度，保证两个按钮尺寸完全相同
  • 新增text-align: center实现按钮内文本水平居中
  • 补全vertical-align: middle属性避免两个按钮对齐偏差
  • 新增line-height: 20px搭配原有上下边框高度，实现文本垂直居中

修改后完整代码 #

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; border-collapse: collapse; border-radius: 1em; overflow: hidden; padding: 1.5em; background: #f6f6f6;" align="center">
            <p style="margin: 0; font-size: 16px; line-height:22px; mso-height-rule: exactly; color:  #000; font-weight:400;"><strong>Hello:</strong></p>
            <strong>Registration fee total: </strong>
            <p>Invoice #: </p>
            <table border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="padding-right: 18px;">
                        <a href="http://example.com" target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 0px; background-color: #0b5584; border-top: 12px solid #0b5584; border-bottom: 12px solid #0b5584; border-right: 18px solid #0b5584; border-left: 18px solid #0b5584; display: inline-block; vertical-align: middle; font-weight: bold; width: 290px; text-align: center; line-height: 20px;">Pay Online using Credit or Debit Card</a>
                    </td>
                    <td style="padding-left: 18px;">
                        <a href="http://example.com" target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 0px; background-color: #0b5584; border-top: 12px solid #0b5584; border-bottom: 12px solid #0b5584; border-right: 18px solid #0b5584; border-left: 18px solid #0b5584; display: inline-block; vertical-align: middle; font-weight: bold; width: 290px; text-align: center; line-height: 20px;">Pay Cash at YouPayMeNow!&reg; Location</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

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