在按钮的 outlook 中不考虑填充

Question

我有一个带填充的锚 link：

<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 不尊重这个填充，它只是被删除了，最好的解决方案是什么才不会弄乱其他客户端的设计。

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，但至少您会得到一个可点击的填充按钮。

（我added/edited一些其他属性来帮助跨客户端显示）

如果您更喜欢其他方法，还有 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>

Answer 3

我从微软模板中获取了按钮代码示例：

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

在按钮的 outlook 中不考虑填充

padding not respected in outlook on button

outlook

html-email