HTML 电子邮件 - 按钮在 outlook 上没有填充

Question

我想知道是否可以使用与上面按钮相同的填充来制作边框。解决方案似乎是当我将边框添加到 td 时，但我不能这样做，因为在其他客户端中，边框具有 border-radius ，这在此处不可见。有任何想法吗？谢谢

第二个按钮的代码：

<!-- 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>
                    <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">
                        <a class="out-main-button-a"
                            href="#" style="display: block; 
                            border-radius: 50px; background-color: #ffffff; 
                            border: 3px solid #061539; 
                            mso-border-alt: 8px solid #061539; 
                            padding: 15px 35px 15px 35px; mso-padding-alt: 4px; 
                            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 -->

Answer 1

在 Outlook 中，您无法将 <a> 等内联元素更改为块元素 (display:block)。所以它忽略了填充、边距等，因为它们是块元素样式。

因此，为了跨电子邮件兼容性，您需要在 <td> 上添加填充（这不会扩展可点击部分，而只会使其看起来比如按钮更大，或者，您可以按照 Mark Robbins 的描述应用 hack。

解决方案 1：（最简单的）TD 按钮

<td align="center" bgcolor="#ffffff" 
    class="out-main-button-padding" 
    style="border-radius: 50px; padding: 15px 35px 15px 35px;
    border-radius: 50px; background-color: #ffffff; 
    border: 3px solid #061539; 
    mso-border-alt: 8px solid #061539; 
    mso-padding-alt: 4px;  font-family: 
    NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial, 
    Helvetica, sans-serif; font-size: 18px; font-weight: bold; 
    line-height: 22px; mso-text-raise: 4px;"
    valign="top">
    <a class="out-main-button-a"
        href="https://nivea.com" style="display: block; 
        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>

我所做的只是将块级样式从 <a> 移动到 <td>。您仍然可以将 display:block 保留在 <a> 上，以使支持此功能的电子邮件客户端的可点击区域更大。

解决方案 2：Mark Robbin 的 A 按钮

<a href="https://example.com/" style="background: #333; border: 2px solid #f00; text-decoration: none; padding: 15px 25px; color: #fff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#333"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden>&nbsp;</i><![endif]--><span style="mso-text-raise:15pt;">Link Text</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->
</a>

通过更改 letter-spacing 值（link 文本的左侧和右侧）来更改左右填充。

通过更改 <span> 中的 mso-text-raise 值来更改底部填充。

通过更改 <i> 中的 mso-text-raise 值来更改顶部填充。

（详见https://www.goodemailcode.com/email-code/link-button）

HTML 电子邮件 - 按钮在 outlook 上没有填充

HTML Email - button has no padding on outlook

html

email

button

html-email