WordPress站点使用Bootstrap 4时元素周围出现异常紫色方块如何解决

问题原因 #

• 属于浏览器内置的用户代理样式，针对标记为:visited（已访问）的可交互元素默认添加的高亮效果，这类原生样式不会出现在你自行编写的前端代码里，常规样式排查很难找到对应定义
• Bootstrap 4自带的样式重置规则没有完全覆盖部分浏览器的已访问元素outline/box-shadow配置，再加上市面很多WordPress主题、插件的样式优先级不足，就会导致该默认样式直接外露
• 少数浏览器扩展（如隐私标记类、广告拦截类）也会强制给已访问链接添加紫色高亮边框，属于浏览器侧的强制样式修改

解决方案 #

直接在WordPress后台的「外观-自定义-额外CSS」面板中添加以下样式代码，覆盖默认规则即可：

1. 通用所有链接的样式重置

a:visited,
a:visited:focus,
a:visited:active {
    outline: none !important;
    box-shadow: none !important;
}

2. 如果是Bootstrap封装的按钮类元素出现该问题，额外补充以下规则

.btn:visited,
.btn:visited:focus,
.btn:visited:active {
    box-shadow: none !important;
    outline: none !important;
}

如果添加样式后仍不生效，可以先在浏览器无痕模式下打开页面测试，排除第三方扩展强制修改样式的可能。

内容的提问来源于stack exchange，提问作者Vladimir B.