Outlook 中的按钮为空答案

【问题标题】：Button is empty in OutlookOutlook 中的按钮为空
【发布时间】：2019-04-17 21:22:57
【问题描述】：

我正在尝试将超链接按钮添加到我正在制作的电子邮件模板中，由于某种原因，当通过 Outlook 打开此电子邮件时，该按钮为空，仅包含寄宿生，不包含图形样式。在网络浏览器中打开它时，即使在 Gmail 上也一切正常，不确定问题出在哪里，希望有人能提供帮助。这是按钮的代码行：

<div align="center" class="button-container center " style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;"><!--[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-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:27pt; v-text-anchor:middle; width:129pt;" arcsize="17%" strokecolor="#59B5EB" fillcolor="#FFFFFF"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#59B5EB; font-family:Roboto, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
    <div style="color: #59B5EB; background-color: #FF0000; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; max-width: 172px; width: 132px;width: auto; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; padding-top: 5px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; font-family: Roboto, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;"><span style="font-size:18px;line-height:40px;"><a href="http://mywebsite.com" style="text-decoration: none; color: #FFFFFF; font-weight:bold">Join Team</a></span></div>
    <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]--></div>

【问题讨论】：

标签： html button graphics hyperlink outlook

【解决方案1】：

这是一个可在 Outlook 和其他电子邮件客户端中使用的按钮示例：

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
  <tr>
    <td style="border-radius: 6px; background: #ff0000;">
      <a href="http://mywebsite.com" style="background: #ff0000; border: 1px solid #ff0000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 6px;">Join Team</a>
    </td>
  </tr>
</table>

您的代码示例中的几乎所有内容都会在 Outlook 和其他电子邮件客户端出现问题。

例如，Outlook 不适用于<div>。 Outlook 不适用于填充。 Outlook 不适用于 Roboto 等 Google 字体或具有两个名称（如 Helvetica Neue）的字体。它不适用于圆角，因此 border-radius: 6px; 将被忽略。也许arcsize="17%" 会起作用，但我不必测试它。我只是想给你一条前进的道路。

祝你好运。

【讨论】：