无法获取样式化的定位标记以显示 Outlook 2013 for Windows 上电子邮件中模拟按钮的正确高度和宽度属



我的代码在 Outlook 15.33 for Mac 中正常工作。 按钮采用 Windows 版本的 Outlook 中链接文本的高度和宽度。我尝试将按钮设置为标签和标签,但我在 Windows 版本的 Outlook 上遇到了相同的格式问题。

<table class="fullwidth260" border="0" width="215" cellspacing="0" cellpadding="5" align="left">
<tbody>
<tr>
<td valign="middle">
<a class="quickLinks" href="http://www.mba.org" style="display: flex; text-align: center; padding: 10px 20px 10px 20px; color: #496f8d; font-family: Arial, san-serif; size: 10pt; line-height: 1.2; border: 1px solid #c8d3dc; background-color: #e3e9ed; text-decoration: none; height: 60px; width: 160px; justify-content: center; flex-direction: column;">STATE RELATIONS ONLINE COMMUNITY</a>
</td>
</tr>
</tbody>
</table>

您的设计对象是电子邮件,而不是 Web。Outlook 非 Mac 不完全支持 CSS 属性 flex 或填充。

Outlook 是让按钮正确显示的主要痛苦。我会给你更多的建议,但你没有发布你现有的代码,这使得很难就如何提供更好的建议来解决你的问题提出建议。

祝你好运。

试试这个方法。我发现它可以在我认识的所有电子邮件客户端上运行。您需要更改 td 的背景颜色、锚标记的背景颜色、笔触颜色和按钮的宽度。

<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.example.com" style="padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link">
Get Started!
</a>
</td>
</tr>
</table>

让我知道这是否有帮助。

最新更新