为什么下划线在深色模式下不显示？答案

【问题标题】：Why underline does not shows up in dark mode?为什么下划线在深色模式下不显示？
【发布时间】：2021-11-26 15:41:59
【问题描述】：

我真的不明白为什么下划线链接在暗模式下不显示（仅在移动设备上的某些浏览器上）。

代码真的很简单：

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;
}

&lt;a href="#"&gt; example &lt;/a&gt;

在暗模式下，它在每个桌面浏览器上都能正常工作。在移动设备上，它适用于 Chromium 和 Firefox。但是在 Brave、Bromite 和 Privacy Browser 上，下划线链接会消失（否则，在浅色模式下它们可以正常工作）。

其他边框也有同样的问题。

带边框的 Firefox 浏览器：

勇敢无边界浏览器：

如果可以的话，我可以发布网站链接。

【问题讨论】：

从未听说过那些浏览器。真的有人用过吗？
如果你仔细看，边界仍然存在，它们只是非常沉闷
将border-color:#ffffff; 设置为备用，因为github.com/brave/browser-laptop/issues/9332
@Viira 该特定问题已修复并已关闭，因此不相关
好的，那么这个怎么样？ css-tricks.com/rgba-browser-support

标签： html css underline darkmode

【解决方案1】：

这是因为rgba 是not supported by some browsers。我建议你添加一个带有rgb 颜色的后备css。或者尝试使用十六进制颜色您可以转换here。

添加后备代码后，您的代码应如下所示。

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 rgb(255, 255, 255); /*fallback here*/
  border-bottom: solid 0.10em rgba(255, 255, 255, 1);
  text-decoration: none;
  color: inherit;
}

&lt;a href="#"&gt; example &lt;/a&gt;

【讨论】：

不行，添加RGB颜色好像没有效果。

【解决方案2】：

我注意到在勇敢的浏览器中仍然存在边框，但它很沉闷，我最好的建议是将filter:brighntnes(50%) 应用于元素

CSS重置代码：

.element { 
 -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;

  border:5px solid #fff;
}
.element:before {
  filter:brightness(50%);
}
.element > * {
  filter:brightness(50%);
}

<div class="element">
    <a href="element"> example </a>
 </div>

【讨论】：