html - 失去 :hover status on between 's in Chrome

Question

我试图通过在用户悬停在行上时更改行的背景颜色来实现简单的表格行悬停效果，这很简单：

tr:hover {
    background: red;
}

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

我试过了border-collapse: collapse，cellspacing="0"但不明白为什么我失去了<tr>单元格之间的悬停，它只发生在单元格的两侧，而不是它们的上方/下方。它在 Firefox 中按预期工作。

这是一个JSFiddle，在 Chrome 中，尝试慢慢地将鼠标从“第一”移动到“第二”，你会看到它们之间有一个非常薄的点，它<tr>失去了悬停背景。

我在这里将其报告为 Chromium 错误。

Answer 1

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

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

jsFiddle 示例。