css Outlook 2016 / 2019未显示底部边框

khbbv19g  于 2023-03-05  发布在  其他
关注(0)|答案(5)|浏览(223)

我已经得到了一个电子邮件模板在一起,一切都是除了一个元素,这是不能在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看起来像这样(注意链接上缺少的底部边框):

有没有什么提示/技巧可以让2 px的底部边框显示在这些电子邮件客户端上?

kjthegm6

kjthegm61#

尝试添加以下内容:
mso-border-alt: 2px solid #e30517;
它是Outlook特有的,会被其他电子邮件客户端忽略。它会在"查看事件"周围创建一个框,但至少它给了你强调。
mso-border-bottom-alt: 2px solid #e30517;将仅在Outlook 2019中创建下划线。
更好的解决方案是创建一个一列两行的表格,第一行有"查看事件",第二行有2px高的背景色,这是所有电子邮件客户端中最一致的解决方案。
祝你好运。

e5nqia27

e5nqia272#

根据this site,Outlook中对边框的支持似乎有缺陷。变通办法可能是使用表和表属性“边框”。我找到了this article,也许它会帮助你实现目标。

kse8i1jr

kse8i1jr3#

Outlook的最佳选择是使用图像作为边框,或者您可以将“边框”设置为内部包含单个“.”的新td;样式,使您无法看到实际的点。Outlook总是一个痛苦的工作。

fv2wmkja

fv2wmkja4#

我尝试了类似的span & div在一个tablemso-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
  • spandiv上的边框(在href内)在Outlook中无法正常工作

如果你找到一个防弹下划线的方式,请让我们知道。

4jb9z9bj

4jb9z9bj5#

我也有同样的问题,这就是我来这里的原因。但我能解决它。虽然不知道为什么,但它起作用了。
最初的边框(缺少底部边框)的字体大小是18px,我将其缩小到16px,底部边框出现了。17px也不起作用。
如果有人对此修复有解释,请分享。

相关问题