Question

我有一个带填充的锚点链接：

<a href="http://my.cris.dev:3008/services/3/viewer" style="text-decoration:none; background-color:#137191; color:#fff; display:block; padding:16px 16px 16px; font:100 16px/16px &quot;Cabin&quot;,Arial, Helvetica, sans-serif; letter-spacing:0.025em; border-radius:4px;">Discover your 3D</a>

但展望并不尊重这种填充，它只是被删除了，这是不打乱其他客户设计的最佳解决方案。

Answer 1

Outlook对盒子模型的支持是......粗略的。试试这段代码：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td bgcolor="#137191" style="padding: 16px; border-radius:4px">
                        <a href="http://my.cris.dev:3008/services/3/viewer" target="_blank" style="font-size: 16px; mso-line-height-rule:exactly; line-height: 16px; font-family: 'Cabin',Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing:0.025em; color: #ffffff; text-decoration: none; display: inline-block;">Discover your 3D</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这将解决Outlook中的折叠填充问题。 Outlook仍然会显示平方角而不是border-radius，但至少你会得到一个可点击的填充按钮。

（我添加/编辑了一些其他属性以帮助跨客户端显示）

如果您更喜欢其他方法，则有a few way to achieve bulletproof buttons in email。

Answer 2

出于某些原因，Outlook中的a-tag的填充仅在与1px边框组合并显示嵌入式块时才有效。然后，您需要让td与按钮共享相同的背景色和宽度，以填写可点击区域。

<table align="center">
    <tbody>
        <tr>
            <td style="background-color: #0079c8;" width="140px"><a href="#" style="display: inline-block; color: #fff;  background-color: #0079c8; width: 125px; border: 1px solid #0079c8; padding: 15px 10px; text-align: center;  vertical-align:middle; text-decoration:none;">Log in&nbsp; &gt;</a></td>
        </tr>
    </tbody>
</table>

按钮上的前景中没有遵守填充

2 个答案: