HTML 电子邮件 link 中的按钮在 outlook 桌面中不起作用

Question

我正在尝试发送一封 HTML 电子邮件，其中包含 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>

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

看起来 link 会被其中一个 span 覆盖，并且由于某种原因只在文本而不是整个 div 上激活。

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

Answer 1

您有两个 css 值在 div 中重复：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 通过未关闭的标签查找器也可以删除任何其他问题，以防出现其他一些有趣的惊喜。

祝你好运！

Answer 2

您的代码很长，我认为 Outlook 会忽略放置在 div 锚标记内的样式。这是一个仅使用 html（无 vml）创建的简单按钮，它在所有电子邮件客户端中呈现相同的效果。

要增加按钮的宽度，请更改内边距。
如果改变颜色：有 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>

优点：您可以使用相同的代码，更改颜色使其成为带边框的按钮。

Answer 3

这是我最终使用的，似乎在所有经过测试的电子邮件客户端上都能正常工作。

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

HTML 电子邮件 link 中的按钮在 outlook 桌面中不起作用

HTML email link in button not working in outlook desktop

html

hyperlink

html-email