仅在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 */
  }
} 

这可以防止你所说的“跳跃”，因为边界本质上总是在那里。