html - 内联 CSS 电子邮件 CTA 按钮未出现在 Outlook Office 365 中 为什么？

Question

当我编写这个直邮电子邮件事件时，我一直遇到这个内联 HTML/CSS 过程的问题。由于某些原因，CTA 按钮不会在 Outlook Office 365 中出现或呈现。天哪，看看下面的代码，如果您发现我可能遗漏的任何问题可能会导致此问题，请告诉我。

内联代码

<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton" style="border-collapse: collapse;border-radius: 10px;box-shadow: 5pt;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #D83826; 4px;box-shadow: 0 5px 0 #D83826;">
<tr>
<td align="center" valign="top" class="callToActionButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;padding-top: 20px;padding-right: 40px;padding-bottom: 40px;padding-left: 40px;color: #F2F2F2;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">
<a href="mailto:mark.nicholls@informpros.com?subject=Aussie Day Enquiry" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F2F2F2;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">Email our expert</a>
</td>
</tr>

这是它在 0365 中的渲染方式

这是它在 O365 中的实际呈现方式

没有红框？

Answer 1

Outlook 不支持“显示”和“填充”，更好的方法是使用边框。

这是一个很好的链接，可以查看 Outlook 支持的内容。 https://www.campaignmonitor.com/css/

例子:

<a style="text-align:center; background-color: red; border-top: solid 8px red; border-right: solid 14px red; border-left: solid 14px red; border-bottom: solid 8px red;">Clickity Click</a>