Outlook邮件中span标签的CSS outline样式不生效如何解决

问题描述 #

给span标签应用点状outline CSS样式时，在Outlook邮件客户端中无法正常显示，期望实现效果如下：

原实现代码如下：

<p style='color: #282728; line-height: 1.5'>
      <span style='line-height: 34px'>USE THIS CODE</span>
      <span style="vertical-align:middle; font-size: 24px; font-weight:bold; background-color:#597b48; color:#000000; outline-style:dotted; outline-color: #000000; padding:0 5px;">FIRST5</span>
</p>

问题根源 #

Outlook桌面端采用Word作为HTML渲染内核，对标准CSS支持度极低，outline相关属性完全不在其兼容列表内，因此样式无法正常渲染。

兼容实现方案 #

弃用不兼容的outline属性，改用Outlook全版本支持的border属性实现点状边框效果，同时补充少量适配属性保证渲染一致性，调整后可直接使用的代码如下：

<p style='color: #282728; line-height: 1.5; margin: 0;'>
      <span style='line-height: 34px;'>USE THIS CODE</span>
      <span style="display: inline-block; vertical-align: middle; font-size: 24px; font-weight: bold; background-color:#597b48; color:#000000; border: 1px dotted #000000; padding: 1px 5px; margin: 0 2px;">FIRST5</span>
</p>

关键适配说明 #

• 给目标span添加display: inline-block属性，避免Outlook下出现边框断裂、内容包裹不全的问题
• 用border: 1px dotted #000000替换原有outline样式，border的点状样式是Word渲染内核原生支持的属性
• 微调padding、margin数值，抵消边框本身占用的布局空间，保证视觉效果和预期的outline效果一致

若需兼容2016及更早的极老旧Outlook版本，可替换为1px*1px的点状背景图平铺模拟边框，该方案兼容性最高，但需要额外准备对应图片资源。

内容的提问来源于stack exchange，提问作者me at stackoverflow