为什么下划线在深色模式下不显示？
为什么下划线在深色模式下不显示？
提问于 2021-10-06 12:51:12
我真的不明白为什么下划线链接不显示在深色模式(只在手机上的一些浏览器上)。
代码非常简单：
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;
}<a href="#"> example </a>
在黑暗模式下，它在所有桌面浏览器上都工作得很好。在移动设备上，它在Chromium和Firefox上运行得很好。但在Brave，Bromite和Privacy浏览器上，下划线链接就会消失(否则，在轻模式下它们就可以正常工作)。
其他边界也存在同样的问题。
带边框的Firefox浏览器：
没有边界的勇敢浏览器：
我可以张贴网站链接，如果它是ok的。
回答 2
Stack Overflow用户
发布于 2021-10-06 12:56:46
我注意到在勇敢的浏览器中边框仍然存在，但是它很单调。我的最佳建议是将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>
Stack Overflow用户
发布于 2021-10-06 13:12:11
这是因为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;
}<a href="#"> example </a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69466061
复制相关文章
相似问题
腾讯云开发者
