Смещение Firefox с вертикальным выравниванием и границей дна

Question

Этот CSS вызывает смещение текста вверх в Firefox при переворачивании, но не в других браузерах

#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

Имеет смысл для меня.Вы добавляете границу шириной 1 пиксель.Это изменит размеры элемента.Простое решение - иметь постоянную рамку и просто изменить ее цвет:

#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;
}