css - Internet Explorer 和 Chrome : table-hover not displayed properly

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唯一的方法是设置 'display: block'在 <tr> 上元素，这需要您之后修复定位。

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