html - 表格中的悬停状态仅在 Firefox 中带有边框移动链接

Question

我知道有人在这里以某种形式或形式提出了此类问题，但无论如何我都无法解决这个问题。屏幕截图包括 CSS。当您将鼠标悬停在行上时，左边框会突出显示它。它将链接移动超过 1px。我尝试用负边际补偿但没有运气(只是为了测试它)。只有 Firefox 会发生这种情况。

%zebra-row {
   transition: background-color .1s ease-out;
   background-clip:padding-box;

  &:nth-child(odd ) {
    background-color: $alabaster;
  }

  &:hover {
    background-color: $gallery;
    border-left:2px solid $aqua-forest;
  }
} 

Answer 1

这是因为正在应用边框并将其移动(正如我确定您已经假设的那样)。

要解决这个问题，您需要使用默认边框，但要使其透明。在悬停时，您只需为边框着色。

%zebra-row {
   transition: background-color .1s ease-out;
   background-clip:padding-box;
   border-left:2px solid transparent;    /* Set the transparent border */

  &:nth-child(odd ) {
    background-color: $alabaster;
  }

  &:hover {
    background-color: $gallery;
    border-left-color:$aqua-forest;      /* Color it on hover */
  }
} 

这可以防止您所说的“跳跃”，因为边界基本上始终存在。