丢失:在Chrome中的<td>之间的<tr>上悬停状态

Question

我试图通过在用户将鼠标悬停在其上时更改行的背景颜色来实现简单的表行悬停效果,这很简单:

tr:hover {
    background: red;
}

但是我注意到了chrome中的一个错误,其中一行中的单元格之间有一个小空间我丢失了:hover,<tr>当你移动它时,即使我的鼠标仍在行上,也可以打开/关闭样式.

我试过了border-collapse: collapse,cellspacing="0"但是看不清楚为什么我会<tr>在细胞之间徘徊,它只发生在细胞的任何一侧,而不是在细胞的上方/下方.它在Firefox中按预期工作.

这是一个JSFiddle,在Chrome中,尝试慢慢将鼠标从"第一个"移动到"第二个",你会看到它们之间有一个非常薄的点,它<tr>会丢失它的悬停背景.

我在这里报告了这是一个Chromium bug .

Answer 1

我不知道为什么会这样,但在<td>元素上设置定位似乎可以解决这个问题.

td {
    padding: 2px 5px;
    position:relative;
}