我已经得到了一个电子邮件模板在一起,一切都是除了一个元素,这是不能在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的底部边框显示在这些电子邮件客户端上?
5条答案
按热度按时间kjthegm61#
尝试添加以下内容:
mso-border-alt: 2px solid #e30517;
它是Outlook特有的,会被其他电子邮件客户端忽略。它会在"查看事件"周围创建一个框,但至少它给了你强调。
mso-border-bottom-alt: 2px solid #e30517;
将仅在Outlook 2019中创建下划线。更好的解决方案是创建一个一列两行的表格,第一行有"查看事件",第二行有2px高的背景色,这是所有电子邮件客户端中最一致的解决方案。
祝你好运。
e5nqia272#
根据this site,Outlook中对边框的支持似乎有缺陷。变通办法可能是使用表和表属性“边框”。我找到了this article,也许它会帮助你实现目标。
kse8i1jr3#
Outlook的最佳选择是使用图像作为边框,或者您可以将“边框”设置为内部包含单个“.”的新td;样式,使您无法看到实际的点。Outlook总是一个痛苦的工作。
fv2wmkja4#
我尝试了类似的
span
&div
在一个table
与mso-border-alt
作为后备,但结果并不令人满意。由于时间紧迫,我把它留在类似下面的代码:
注:
href
上定义的边框和下划线会在href
下创建一条较粗的线。mso-border-bottom-alt
-仅适用于Outlook 2019span
或div
上的边框(在href
内)在Outlook中无法正常工作如果你找到一个防弹下划线的方式,请让我们知道。
4jb9z9bj5#
我也有同样的问题,这就是我来这里的原因。但我能解决它。虽然不知道为什么,但它起作用了。
最初的边框(缺少底部边框)的字体大小是18px,我将其缩小到16px,底部边框出现了。17px也不起作用。
如果有人对此修复有解释,请分享。