html - 表格单元格内部时的 CSS z-index 问题

Question

我有一个日历/表格，当您将鼠标悬停在每一天上时，我们都会有一个小弹出窗口，它绝对位于每个单元格下方。

为了完成这项工作，我添加了一个 <div style="relative" />每个细胞内。在 FF 中工作正常，但当您在 ​​IE 中将鼠标悬停在它上面时，z-index 会被忽略。

我已经尝试了所有我能想到的技巧来让它在 IE 7 + 8 中工作。

Answer 1

.wrapper div 上的 td 元素内不需要所有单独的 z-indexes(它们都可以设置为 1 我相信)，并设置这些属性:

/* add these two to your selector */
#calendar tbody td {
  position: relative;
  z-index: 1;
}

/* create this new selector */
#calendar tbody td:hover {
  z-index: 2;
}

使用 firebug 和 IE 的开发者工具，在我看来它可以在 Firefox 和 IE7 和 8 中工作。