为什么深色模式下链接下划线在部分移动端浏览器中不显示？

问题根因 #

你遇到的边框消失问题，是Brave、Bromite、Privacy Browser这类隐私向Chromium内核浏览器的强制深色模式自动覆写机制导致的：这类浏览器默认开启了网页深色模式强制适配功能，会自动调整元素的边框、背景、文字颜色，避免内容在深色背景下辨识度不足，你用border模拟下划线的写法被该机制误判为需要调整的低对比度元素，因此边框颜色被覆写为和背景一致，视觉上消失。

可行解决方案 #

• 方案1：添加强制颜色调整豁免属性，明确告知浏览器不要修改该元素的颜色配置

a {
  -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  border-bottom: solid 0.10em rgba(255, 255, 255, 1);
  text-decoration: none;
  color: inherit;
  /* 新增以下两行 */
  -webkit-forced-color-adjust: none;
  forced-color-adjust: none;
}

• 方案2：改用原生text-decoration实现下划线，避免浏览器误判

a {
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
  text-decoration: underline 0.10em rgba(255, 255, 255, 1);
  text-underline-offset: 0.2em; /* 可调整下划线和文字的间距 */
  color: inherit;
}

• 方案3：如果坚持使用border实现，可将边框宽度从0.10em改为固定的1px，避免高DPI移动端设备上em换算后物理像素不足1px，被浏览器自动隐藏渲染。

补充说明 #

如果上述方案都无效，可以检查对应浏览器的设置项，关闭「强制网页适配深色模式」类开关即可恢复正常显示，该异常和你的业务代码逻辑无关，属于浏览器默认的体验优化逻辑导致的误拦截。

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