链接中的文字在悬停时向下跳跃1px

Question

将光标悬停在链接上时，就像它向下跳跃或在底部添加额外的像素。看起来像是一个常见问题。我尝试过在这个网站上找到的解决方案，但似乎都没有。

这是小提琴 https://jsfiddle.net/srhjv284/

这是html

<div class="wrap">
  <a href="#" class="item">Item 1 text</a>
  <a href="#" class="item">Some Other Text</a>
  <a href="#" class="item">Last Item</a>
</div>

这是css

.wrap {width:200px;}
.item {
  display:block;
  margin:2px 0;
  padding:4px 8px;
  background-color:#fff;
  font-family:arial;
  font-size:15px;
  color:#ba050a;
  border:1px solid #ba050a;
  text-decoration:none;
  transition:0.4s;
}
.item:hover {
  color:#fff;
    background-color:#ba050a;
}

Answer 1

这种情况正好发生，因为您在悬停时具有相同的边框颜色和背景颜色 因此，当您悬停时，1px边框与背景合并，感觉空间增加 请在悬停时更改边框颜色或背景颜色，您将看到差异。