Outlook 2016 / 2019 未显示边框底部答案

【问题标题】：Outlook 2016 / 2019 not showing border bottomOutlook 2016 / 2019 未显示边框底部
【发布时间】：2019-12-18 13:16:04
【问题描述】：

我有一个电子邮件模板，其中除了一个元素之外一切都在工作，该元素无法在 Outlook 中正确呈现。这是代码：

<a href="https://website.com/link" style="color: #fff; display: inline-block; font-weight: bold; text-decoration: none; border-bottom: solid 2px #e30517; padding-bottom: 3px; padding-left: 3px; padding-right: 3px;">View Event</a>

其他浏览器会显示这个：

Outlook 2016 和 2019 看起来像这样（注意链接上缺少的底部边框）：

是否有任何提示/技巧可以让 2px 底部边框显示在这些电子邮件客户端上？

【问题讨论】：

标签： html css outlook html-email

【解决方案1】：

尝试添加这个：

mso-border-alt: 2px solid #e30517;

它是特定于 Outlook 的，其他电子邮件客户端会忽略它。它会在“查看事件”周围创建一个框，但至少它给了你重点。

mso-border-bottom-alt: 2px solid #e30517; 将仅在 Outlook 2019 中创建下划线。

更好的解决方法是创建一个包含一列和两行的表。第一行将具有“查看事件”，第二行将具有 2px 高的背景色。这是所有电子邮件客户端中最一致的修复。

祝你好运。

【讨论】：

【解决方案2】：

根据this site，Outlook 中对边框的支持似乎有问题。解决方法可能是使用表格和表格属性“边框”。我找到了this article，也许它会帮助你实现你的目标。

【讨论】：

【解决方案3】：

对于 Outlook，您最好的选择是使用图像作为边框，或者您可以使用单个“.”将“边框”设置为新的 td。在里面;样式使您看不到实际的点。 Outlook 总是很难解决。

【讨论】：

【解决方案4】：

我在table 中尝试了与span 和div 类似的方法，并以mso-border-alt 作为后备，但结果并不令人满意。

时间紧迫，我把它留在类似于下面的代码中：

<a href="http://www.blah.com" target="_blank" style="text-decoration:underline; color:#0A0A24;text-decoration-color:#66CBC3;mso-border-bottom-alt: 2px solid #66CBC3;">MemberAccess</a>

注意：

在href 上定义的边框和下划线会在一些电子邮件客户端上的href 下创建一条较粗的线。
mso-border-bottom-alt - 仅适用于 Outlook 2019
span 或 div（在 href 内）的边框在 Outlook 中无法正常工作

如果您确实找到了下划线的防弹方法，请告诉我们。

【讨论】：