链接文本hover时向下偏移1px问题求助，现有解决方案无效

我之前也碰到过这个烦人的小问题！这大概率是浏览器在渲染文本和边框颜色变化时的细微抖动导致的，尤其是字体没固定行高或者浏览器开启了特定字体优化的时候。给你几个亲测有效的解决方案：

方案1：设置固定行高 #

给链接添加固定的line-height，让文本的垂直位置始终保持稳定，不会因为颜色变化出现偏移：

.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;
  line-height: 1.2; /* 根据字体调整合适的数值，确保文本位置稳定 */
}

方案2：触发硬件加速消除渲染抖动 #

添加transform: translateZ(0)强制浏览器用GPU渲染元素，能解决很多渲染层面的细微偏移问题：

.item {
  /* 保留原有样式 */
  transform: translateZ(0);
}

方案3：禁用默认outline（可选） #

部分浏览器会给hover状态的链接自动添加outline，虽然你的样式里没写，但手动禁用能彻底排除这个干扰项：

.item:hover {
  color:#fff;
  background-color:#ba050a;
  outline: none; /* 禁用浏览器默认的hover轮廓 */
}

你可以把这几个方法组合起来用，基本就能解决偏移问题啦！

完整测试代码 #

<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>

.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;
  line-height: 1.2;
  transform: translateZ(0);
} 
.item:hover {
  color:#fff;
  background-color:#ba050a;
  outline: none;
}

内容的提问来源于stack exchange，提问作者AliMahachkala