按钮中的 HTML 电子邮件链接在 Outlook 桌面中不起作用答案

【问题标题】：HTML email link in button not working in outlook desktop按钮中的 HTML 电子邮件链接在 Outlook 桌面中不起作用
【发布时间】：2021-05-27 18:05:24
【问题描述】：

我正在尝试发送带有 URL 的 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 桌面应用程序上，该链接不可点击。它看起来也有点奇怪，这是一个打印屏幕：

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

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

【问题讨论】：

标签： html hyperlink html-email

【解决方案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 以消除任何其他问题，以防万一还有一些其他有趣的惊喜。

祝你好运！

【讨论】：

这似乎也没有解决问题，我已经删除了;;和双宽度自动没有成功。

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

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

【讨论】：

这似乎不起作用，该按钮看起来不错但在 Outlook 桌面中不可点击。
@Rémi Outlook 需要正确的链接。您是否使用实际链接尝试过？我已经使用这个代码几年了，它还没有让我失望。

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

【讨论】：