在链接上使用CSS变换时摇摇欲坠

Question

我有一个页脚导航。导航是一个无序列表，其中包含六个列表项，每个项目都有一个锚点或链接标签。

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

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

我对CSS和HTML的使用很新鲜。

我已经读过一些文章（背面可见性：隐藏；），但是不知道如何使用它以及在哪里使用它可以以某种方式解决此问题，但是正如我之前所说，我是从CSS开始的，所以有点困惑

.nav {
  list-style: none;
  padding: 4rem;
  background-color: #101d2c;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
  align-items: center;
}

.nav__link:link,
.nav__link:visited {
  text-decoration: none;
  font-size: 1.4rem;
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
  display: block;
  transition: all .2s;
}

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px);
}

<ul class="nav">
  <li class="nav__item"><a href="#" class="nav__link">Find your dream home</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
</ul>

Answer 1

我无法向您解释CSS转换为何不顺畅，但这是一个常见问题，我发现自己每天都会在网络上注意到这一点。 CSS有许多怪异的错误和缺陷，目前是其中之一。

这是解决您问题的一种方法，因此您至少可以在不出现不稳定文本的情况下实现所需的目标：

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

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px); <-- remove this line
  margin-top: -6px; <-- add this line
}

我使用了6px的负顶边距（-6px），因为它看起来与使用CSS转换翻译的3px非常相似。

https://codepen.io/anon/pen/yZweLp?editors=1100#0

Answer 2

我不知道为什么，但是当我遇到问题时，我使用AnyMap，它通常可以解决问题。