MSO 按钮背景色

Question

我正在尝试增加 MSO 电子邮件客户端上此按钮的橙色背景数量。该按钮在所有其他电子邮件客户端上按预期工作。现在，当我希望它像其他客户端上呈现的按钮一样包围它时，橙色紧紧地围绕着 MSO 上的文本。它没有像预期的那样“填充”。

<!--[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: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://mktg.bsqu.com/##purl##/w1_purl.html" style="height:31.5pt;width:198.75pt;v-text-anchor:middle;" arcsize="10%" stroke="false" bgcolor="#e772a2b"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px"><!
                          [endif]--><a
                            href="https://mktg.bsqu.com/##purl##/w1_purl.html"
                            style="
                              -webkit-text-size-adjust: none;
                              text-decoration: none;
                              display: inline-block;
                              color: #ffffff;
                              background-color: #e77a2b;
                              border-radius: 4px;
                              -webkit-border-radius: 4px;
                              -moz-border-radius: 4px;
                              width: auto;
                              width: auto;
                              border-top: 1px solid #e77a2b;
                              border-right: 1px solid #e77a2b;
                              border-bottom: 1px solid #e77a2b;
                              border-left: 1px solid #e77a2b;
                              padding-top: 5px;
                              padding-bottom: 5px;
                              font-family: Arial, Helvetica Neue, Helvetica,
                                sans-serif;
                              text-align: center;
                              mso-border-alt: none;
                              word-break: keep-all;
                            "
                            target="_blank"
                            ><span
                              style="
                                padding-left: 20px;
                                padding-right: 20px;
                                font-size: 16px;
                                display: inline-block;
                                letter-spacing: undefined;
                              "
                              ><span
                                style="
                                  font-size: 16px;
                                  line-height: 2;
                                  word-break: break-word;
                                  mso-line-height-alt: 32px;
                                "
                                >Download the Brochure</span
                              ></span
                            ></a
                          >

这是它在 Outlook 上的呈现方式：

Answer 1

好的，我在尝试使用您的原始代码时遇到错误。 Outlook 根本不喜欢它。有一项服务 buttons.cm 可以帮助您进行按钮格式化，但业内许多人认为代码已经过时，并且像下面的代码片段或 Mark Robbins button code 这样的代码在所有电子邮件客户端中都更加灵活。我个人使用 Mark Robbin 的代码，但对于那些没有太多使用 html 电子邮件经验的人来说，它可能会很刺耳，所以下面的代码片段就可以正常工作。

几乎普遍友好。
仍然需要 Outlook 解决方法。
link 使用边框填充 linked 区域，以便更好地支持更多客户端。
Outlook 代码中使用的填充值应该几乎与边框宽度值匹配。我个人发现四边都留有 5px，模仿 Outlook 中所有其他电子邮件客户端的按钮高度和宽度。
这种按钮编码方法只需要对 URL 进行一次更新，而您的旧代码和 buttons.cm 需要两次 URL 更新

<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#e77a2b" style="padding:9px 15px;" valign="top">
<![endif]-->
<a class="button" href="https://mktg.bsqu.com/##purl##/w1_purl.html" target="_blank" style="background-color:#e77a2b;border-collapse:separate !important;border-top:14px solid #e77a2b;border-right:20px solid #e77a2b;border-bottom:14px solid #e77a2b;border-left:20px solid #e77a2b;color:#ffffff;display:inline-block;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;font-size:16px;line-height:16px;text-align:center;text-decoration:none; border-radius:4px;">Download the Brochure</a>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

如果您遇到任何问题，请告诉我。

MSO 按钮背景色

MSO Button Background Color

outlook

button

html-email

htmlbutton