这是一个创建于 480 天前的主题，其中的信息可能已经有所发展或是发生改变。
在看 wordpress 的主题，打算做些参考
https://wp-themes.com/twentyseventeen/?p=36
我发现这个 demo 的链接高亮会有诡异的现象，会残留多一条下划线
（偶现，多找几个链接用鼠标划一下应该能复现）
https://imgur.com/a/K83yF9G
但这个 bug 是在 edge 或者其它 chrome 系浏览器才存在的，firefox 就没这个问题
这种 bug 该怎么修复或者规避？不懂前端，求指教
https://wp-themes.com/twentyseventeen/?p=36
我发现这个 demo 的链接高亮会有诡异的现象，会残留多一条下划线
（偶现，多找几个链接用鼠标划一下应该能复现）
https://imgur.com/a/K83yF9G
但这个 bug 是在 edge 或者其它 chrome 系浏览器才存在的，firefox 就没这个问题
这种 bug 该怎么修复或者规避？不懂前端，求指教
 |
1
shuxhan 2023-07-26 22:03:43 +08:00  1
感觉是高分屏下浏览器的问题，我用 2k 缩放 200%可以看到残留的线，再点击下空白消失，估计是 chrome bug ？
|
 |
2
lneoi 2023-07-26 22:06:00 +08:00
-webkit-box-shadow: inset 0 -1px 0 rgb(15 15 15);
box-shadow: inset 0 -1px 0 rgb(15 15 15); 这个样式取消掉就不会产生了，看起来就是为了搞链接可点击的提示效果 |
|
3
lneoi 2023-07-26 22:07:55 +08:00
哦 看了图片 是底下还有一横 在目前用的浏览器倒是复现不出来 会不会是 hover 效果后残留的
|
 |
4
awanabe 2023-07-26 22:11:16 +08:00 1
chrome 系列一直有一个问题就是对 1px 的除法的问题..在动画或者缩放情况下...不能凑整数就会出现溢出
ff 会收拾的很干净 |
|
5
lneoi 2023-07-26 22:17:28 +08:00 1
400%下能稳定出现，hover 后的 box-shadow 残留的，改变颜色后可以看到残留颜色，去除第一个 inset 后不会出现，但动态效果会不太一样。
|
 |
6
P233 2023-07-26 22:27:30 +08:00 1
感觉是 transition 不明确导致的问题
前：inset 0 -1px 0 rgba(15, 15, 15, 1) 后：inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1) 建议 前：0 1px 0 rgba(15, 15, 15, 1) 后：0 3px 0 rgba(0, 0, 0, 1) |
 |
7
LLaMA2 2023-07-26 22:37:35 +08:00 1
box-sizing: inherit; 导致的
|
 |
8
Caturra OP |
|
9
P233 2023-07-27 00:05:41 +08:00
如果 edge 还有问题，是不是一个加了 inset ， 另一个没有？
参考 W3C 的要求 For example, the animation type of the box-shadow property is shadow list, which defines that when the inset keyword is absent in one value but present in the other, discrete animation is used. As a result 0px 0px black and inset 10px 10px black are not transitionable. https://drafts.csswg.org/css-transitions/ |
Select Language