Internet Explorer 和 Chrome：表格悬停未正确显示

Question

为了获得更好的视觉体验，我在 <tr> 上悬停时使用 CSS 样式。

查看完整设计：http://jsfiddle.net/rDjE3/1/

我用过：

.table_test tr:hover { outline: none; border-color: #29EC24; box-shadow: 0 0 10px #29EC24; }

这在 Firefox 中运行良好。

但在 Internet Explorer 中，悬停显示不完整（仅在 <td> 之间），而在 Google Chrome 中完全没有显示任何内容。

为什么？

Answer 1

首先，这似乎是 Chrome 的官方错误。如here 所述，唯一的方法是在<tr> 元素上设置'display: block'，这需要您在之后修复定位。

此外，box-shadow 要求您为 Chrome 使用 -webkit- 前缀。您可以看到一个“工作”且格式错误的示例here。但是您必须自己设置表格单元格的宽度。