HTML email 按钮中的链接在 outlook 桌面中不起作用

Question

我正在尝试发送 HTML email 和 URL ，单击按钮即可访问。 这是我使用的代码：

<div align="left" class="button-container" style="padding-top:40px;padding-right:30px;padding-bottom:40px;padding-left:40px;">
<!--[if mso]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tr>
        <td style="padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 40px" align="left">
            <v:roundrect
                xmlns:v="urn:schemas-microsoft-com:vml"
                xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:39pt; width:198pt; v-text-anchor:middle;" arcsize="4%" stroke="false" fillcolor="#0f8de9">
                <w:anchorlock/>
                <v:textbox inset="0,0,0,0">
                    <center style="color:#ffffff; font-family:Arial, sans-serif; font-size:14px">
                        <![endif]-->
                        <a href="{{ url }}">
                            <div style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#0f8de9;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;width:auto; width:auto;;border-top:1px solid #0f8de9;border-right:1px solid #0f8de9;border-bottom:1px solid #0f8de9;border-left:1px solid #0f8de9;padding-top:10px;padding-bottom:10px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all;">
                                <span style="padding-left:20px;padding-right:20px;font-size:14px;display:inline-block;">
                                    <span style="font-size: 16px; margin: 0; line-height: 2; word-break: break-word; mso-line-height-alt: 32px;">
                                        <strong>
                                            <span data-mce-style="font-size: 14px; line-height: 28px;" style="font-size: 14px; line-height: 28px;">Confirm your email address</span>
                                        </strong>
                                    </span>
                                </span>
                            </div>
                        </a>
                        <!--[if mso]>
                    </center>
                </v:textbox>
            </v:roundrect>
        </td>
    </tr>
</table>
<![endif]-->
</div>

它适用于大多数浏览器 email 客户端和一些桌面客户端，但在 outlook 桌面应用程序上，该链接不可点击。 它看起来也有点奇怪，这是一个打印屏幕：

看起来链接将由其中一个跨度转换，并且由于某种原因仅在文本上有效，而不是在整个 div 上有效。

有人可以建议如何在 outlook 桌面上使整个 div 处于活动状态和可点击状态吗？

Answer 1

这是我最终使用的，似乎在所有经过测试的 email 客户端上都可以正常工作。

<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left" style="margin-top:40px;margin-right:29px;margin-bottom:40px;margin-left:40;">
    <tr>
        <td style="background: #0f8de9; text-align: center; padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;">
            <a href="{{ url }}" style="background: #0f8de9; border: 15px solid #0f8de9; letter-spacing: 2px; font-size: 14px; mso-height-rule: exactly; line-height: 60px; text-align: center; text-decoration: none; display: block;">
                &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff; font-weight: 900">Confirm your email address</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
        </td>
    </tr>
</table>
<!-- Button : END -->

Answer 2

你的代码很长，我认为 Outlook 忽略了 styles 放置在锚标签内的 div 中。 这是一个仅使用 html（无 vml）创建的简单按钮，它在所有 email 客户端中呈现相同。

• 要增加按钮的宽度，请更改填充。
• 如果更改 colors：有 5 个相同颜色的实例。

 <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"> <tr> <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="#URL" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;" title="Click here to start survey">Click here</a> </td> </tr> </table>

优点：您可以使用相同的代码，将 colors 更改为带边框的按钮。

Answer 3

您有两个 css 值在 div 中重复： width:auto; width:auto;; width:auto; width:auto;; width:auto;; . 删除多余的; 看看这是否能让填充工作。

<div style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#0f8de9;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;width:auto; width:auto;;
border-top:1px solid #0f8de9;border-right:1px solid #0f8de9;border-bottom:1px solid #0f8de9;
border-left:1px solid #0f8de9;padding-top:10px;padding-bottom:10px;
font-family:Helvetica Neue, Helvetica, Arial, sans-serif;text-align:center;
mso-border-alt:none;word-break:keep-all;">

此外，您可能未能将其包含在代码示例中，但您没有结束div标记。

通过未封闭的标签查找器运行您的 html 以消除任何其他问题，以防万一还有一些其他有趣的惊喜。

祝你好运！