Html 在链接上使用CSS转换时不稳定

我有一个页脚导航。导航是一个无序列表，有六个列表项，每个项都有一个锚或链接标记

现在我的问题是，当我将鼠标悬停在基本上是链接的列表项上时（根据CSS代码转换为Y轴上的-3px-->），但当它返回到链接或正常状态时，链接文本会上下移动

是什么导致了这种异常行为

我对CSS和HTML的经验是新鲜的

我在某个地方读过（backface visibility:hidden；），但不知道如何使用它以及在哪里使用它可以以某种方式解决这个问题，但正如我前面所说的，我开始使用CSS，所以对它的工作原理有点困惑

.nav{
列表样式：无；
填充：4rem；
背景色：#101d2c；
显示：网格；
网格模板列：重复（自动拟合，最小值（15rem，1fr））；
网格间距：2rem；
对齐项目：居中；
}
.导航链接：链接，
.导航链接：已访问{
文字装饰：无；
字体大小：1.4rem；
字体系列：“Josefin Sans”，无衬线；
颜色：#fff；
文本转换：大写；
文本对齐：居中；
填充：1.5雷姆；
显示：块；
过渡：all.2s；
}
.导航链接：激活，
.导航链接：悬停{
背景色：rgba（#fff，.05）；
转换：translateY（-3px）；
}

我无法向您解释为什么CSS转换不流畅，但这是一个我每天都在网络上注意到的常见问题。CSS有许多奇怪的错误和缺陷，这是目前的一个

这里有一个解决您的问题的方法，这样您至少可以在没有不稳定文本的情况下实现您想要的：

删除css转换并添加负上边距：

.nav\u链接：激活，
.导航链接：悬停{
背景色：rgba（#fff，.05）；
变换：translateY（-3px）我不知道为什么，但当我遇到这个问题时，我会使用
背面可见性：隐藏；
，它通常会解决问题。
你的代码有小提琴/笔吗？@Bodrov我刚刚发现我的文本在mozilla中的效果不稳定，而不是在chrome中。在chrome中效果很好。我在Firefox中打开了笔，它看起来很好。你还在吗在你的浏览器中出现错误？文本抖动效果的可能重复已经大大减少了，但还没有完全消失，现在这个解决方案可以接受。谢谢你！谢谢你的时间。我刚刚尝试在Firefox中使用它，但没有看到任何改进：/@braed yes no improvementFirefox在CSS转换方面有一些奇怪的行为ns.Backface通常会修复它们，而Chrome并不需要它们（我正在使用Chrome，我看到你的菜单工作得很好）。事实上，它在我的Chrome中也工作得很好，但真正的罪魁祸首是Mozilla。我也看到菜单在Chrome中工作得很好，但在Firefox中文本不稳定。不使用
转换
（例如使用负边距）为我修复了不稳定的文本。