MSO 按钮背景颜色

编程问答 2022-04-30

问题描述

我正在尝试增加 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"><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 上的呈现方式：

enter image description here

解决方法

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

  1. 非常友好。
  2. 仍然需要 Outlook 解决方法。
  3. 链接使用边框填充链接区域，以便更好地支持更多客户。
  4. Outlook 代码中使用的填充值应几乎与边框宽度值匹配。我个人发现各边都留有 5px，这与 Outlook 中所有其他电子邮件客户端的按钮高度和宽度相似。
  5. 这种按钮编码方法只需要对 URL 进行一次更新，而您的旧代码和 button.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]-->

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

buttonbuttonbuttonhtml-emailhtmlbuttonoutlook