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

Question

我有一个日历/表格,当你悬停在每一天我们有一个小弹出窗口,绝对位于每个单元格下方.

为了完成这项工作,我<div style="relative" />在每个单元格中添加了一个.在FF中正常工作,但是当你在IE中将鼠标悬停在它上面时,z-index被忽略了.

我已经尝试了所有可以让它在IE 7 + 8中运行的黑客攻击.

Answer 1

无需所有单个z-indexes的.wrapperdiv的内部td元素(他们都可以设置为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中工作.