Outlook深色模式下带href的a标签文本背景色异常如何修复？

问题原因 #

部分Windows桌面版Outlook的深色模式渲染逻辑存在特有bug，会强制给所有带href属性的<a>标签文本叠加系统默认高亮背景，普通的background-color样式优先级低于MSO内置渲染规则，因此无法覆盖该异常效果。

可行修复方案 #

你可以按以下步骤调整代码：

• 给<a>标签新增两个MSO专属样式：mso-style-priority: 100 !important;、mso-highlight: none !important;，强制覆盖Outlook内置的链接高亮规则
• 在<a>标签内部嵌套一层<span>，把文本颜色、背景色属性同步写在<span>的行内样式中，避免Outlook忽略<a>标签的样式声明
• 对齐VML圆角矩形的href属性与普通<a>标签的链接地址，避免两种渲染逻辑冲突

修复后完整代码 #

<div style="margin-top: 10px; "><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="height:48px;v-text-anchor:middle;width:155px;" arcsize="17%" stroke="f" fillcolor="#4e40ef">
    <w:anchorlock/>
    <center>
<![endif]-->
    <a href="http://google.com"
style="mso-style-priority:100!important;mso-highlight:none!important;background-color:orange; color:white; text-align:center;text-decoration:none;width:155px;">
        <span style="color:white;background-color:orange;">Click here</span>
    </a>
<!--[if mso]>
    </center>
</v:roundrect>
<![endif]--></div>

额外补充 #

如果调整后还是存在问题，可以额外在邮件头部的样式块里加入针对Outlook的专属样式：

<!--[if mso]>
<style type="text/css">
a {mso-highlight: none !important;}
</style>
<![endif]-->

该样式仅在MSO环境下生效，不会影响其他邮件客户端的渲染效果。

内容的提问来源于stack exchange，提问作者cyo21