按钮的前景中不尊重填充答案

【问题标题】：padding not respected in outlook on button按钮的前景中不尊重填充
【发布时间】：2017-01-28 16:03:20
【问题描述】：

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

<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>

但是outlook不尊重这个填充，它只是被删除了，最好的解决方案是不搞乱其他客户端的设计。

【问题讨论】：

标签： outlook html-email

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我从 microsoft 模板中获得了按钮代码示例：

    <tr>
    <td style="padding: 0px 0px 40px;">

        <table align="center" border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td align="center" style="padding-bottom: 0px !important; margin-bottom: 0px !important;" cellspacing="0" border="0" cellpadding="0">
                        <a class="fixLinkWhite" style='text-align: center; color: rgb(255, 255, 255); line-height: 19px; font-family: "Segoe UI Semibold", wf_segoe-ui_semibold, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; font-size: 16px; font-weight: 500; display: inline-block;' href="https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclick.mail.onedrive.com%2F%3Fqs%3D66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8&amp;data=04%7C01%7C%7C1da4d1818b194c2ce45508d9b586e09f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740413170283041%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&amp;sdata=P48lMVNNmii3puOCtHjGAGqjBauzZvUfKua%2F0hsS2Z0%3D&amp;reserved=0" target="_blank" shash="lVj7xGxKkteyQkNqUIWVOtfqS5bLgunSFQJWPeQ+a+jLeZJ0lydeWcm1fiSFwJLd6OvwJNV2YVATqaHA5r9xyo2q+4/ssBdAEfVO93OqZLe1Ol46wxjFEMaqebYBsJUqECxQiHgCvIo9cZ9OSacRvZS6y6UiyPLq3xDoiAJGDzc=" originalsrc="https://click.mail.onedrive.com/?qs=66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8">
                            <p class="fixLinkWhite" style="padding: 10px 0px; border: 1px solid rgb(0, 120, 215); border-image: none; color: rgb(255, 255, 255); line-height: 19px; font-size: 16px; font-weight: 500; display: inline-block; background-color: rgb(0, 120, 215);">&nbsp;&nbsp;&nbsp; Перейти в ваш OneDrive &nbsp;&nbsp;&nbsp;</p>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

    </td>
</tr>

【讨论】：