Firefox使用垂直对齐和边框底部移动

Question

此css导致文本在滚动时向上移动，但在其他浏览器中不会移动

#element{
height:40px;
}

#element a,img{
vertical-align:middle;
}

#element a{
font-size:16px;
color:#d1d1d1;
text-decoration:none;
}

#element:hover a{
border-bottom: #fff 1px dotted;
}

Answer 1

对我有意义。您正在添加1px宽度的边框。这将改变元素的尺寸。一个简单的解决方案是使用永久边框并改变其颜色：

#element a {
    font-size: 16px;
    color: #d1d1d1;
    text-decoration: none;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: transparent;
}

#element:hover a {
   border-bottom-color: #fff;
}

Answer 2

添加display: inline-block;和margin-bottom: -1px;以补偿悬停时底部的额外像素。

#element:hover a{
  border-bottom: #fff 1px dotted;
  margin-bottom: -1px;
  display: inline-block;
}