Html CSS悬停抖动-背景色

如果您将鼠标悬停在“x”的拐角处，您将从更改背景颜色的：hover效果中获得抖动

我查看了

pseudo

解决方案，但找不到任何背景转换

任何人都可以在不创建额外标记的情况下修复抖动吗

.feed\uu btn{
显示器：flex；
宽度：12px；
高度：12px；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
边界半径：50%；
颜色：#6f6f90；
字体大小：12px；
位置：绝对位置；
光标：指针；
过渡：背景色0.25s；
}
.feed\uu btn：悬停{
颜色：白色；
字体大小：6px；
背景色：#e05e7f；
}

---

×

在我看来，您的12px跨度大小无法（相当）适应12px字体大小。我刚刚运行了一段JSFIDLE代码，使宽度和高度等于14px，无法再现抖动。然而，我可以用原来的12px大小复制它。

只需从

转换中删除
背景色
：


.feed\uu btn{
显示器：flex；
宽度：12px；
高度：12px；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
边界半径：50%；
颜色：#6f6f90；
字体大小：12px；
位置：绝对位置；
光标：指针；
过渡：/*背景色*/0.25s；
}
.feed\uu btn：悬停{
颜色：白色；
字体大小：6px；
背景色：#e05e7f；
}
×
抖动可能是
span
元素在悬停时更改大小的结果-可能是因为
字体大小从
12px
更改为
6px
。如果在悬停状态下删除字体大小属性，是否仍会发生抖动？您是对的。所以这是字体问题。什么是适应字体大小变化的修复方法？我只是在我创建的JSFIDLE中尝试了这个方法，但没有解决问题。悬停仍然引起抖动。@Neil，我在这里运行时没有任何抖动。为什么不在你的小提琴上添加一个链接呢？如果结果不同，这个问题是否真的可以从不同浏览器的字体呈现实现中扩展出来？最初的示例在Chrome中似乎有抖动，但我在Firefox中没有看到相同的问题：@user2921551，最初的示例在Chrome、FF和Safari中为我抖动。@KoshVery我刚刚在span中添加了
padding:1px
，它似乎为我解决了Chrome上的抖动问题。我认为@Neil是正确的，因为字体大小超出了它的容器。