IE7内容重叠忽略z-index

Question

这是一个类似于此的网格结构内容：

<div id="gridBlock">
  <div class="list-lot-item">
    <div class="list-lot-item-info">
        <a href="#" class="list-lot-item-col1"></a>
        <div class="list-lot-item-col2"></div>                       
        <div class="list-lot-item-col3"></div>
    </div>
  </div>
  <div class="list-lot-item">....</div>
</div>

有一些像这样的CSS（但在JSFiddle中更多）：

#gridBlock .list-lot-item{
 float:left;
 position:relative;
 height:25px;
 width:50px;
 border:1px solid #fff;
 padding-left:2px;
}
#gridBlock .list-lot-item-info,
#gridBlock .list-lot-item-info-on{
 display:block;
 position:absolute;
 background-color:#fff;
 border:1px solid #fff;
 width:50px;
}
#gridBlock .list-lot-item-info{
 z-index:199;
}
#gridBlock .list-lot-item-info-on{
 border:1px solid red;
 top:0;
 z-index:200;                            
 position:relative;
 background-color:yellow;
}
#gridBlock .list-lot-item-col2,
#gridBlock .list-lot-item-col3{visibility:hidden;}
#gridBlock .list-lot-item-info-on .list-lot-item-col2,
#gridBlock .list-lot-item-info-on .list-lot-item-col3{visibility:visible;}

对于每个框“悬停”状态，我应用一个具有更高z-index的新“on”类：

$('#gridBlock .list-lot-item').hover(
  function(){$(this).children(0).removeClass("list-lot-item-info");$(this).children(0).addClass("list-lot-item-info-on");},
  function(){$(this).children(0).removeClass("list-lot-item-info-on");$(this).children(0).addClass("list-lot-item-info");}
);

显然，它在FF，Chrome，IE8 +中运行得很完美，但我们的老朋友IE7很弱。请尝试兼容模式并查看：

Live Demo in Action

当它应该是签证时，IE7会将相邻网格框下方的悬停框弹出。有什么好建议如何修复它？

Answer 1

我无法访问任何版本的IE来测试这个，因为我在Ubuntu上工作。

但是，我的理解是z-index取决于position:absolute;

尝试从position:relative;移除#gridBlock .list-lot-item-info-on 如果这恰好打破了你的设计，你也可以用边距重置它。

Answer 2

添加：

#gridBlock .list-lot-item:hover {
   z-index:200;   
}

由于IE7对z-indices非常严格。拿你的.list-lot-item他们都有相同的z-index值（这是什么都没有），所以最后一个是在前面的那个。他们无法摆脱父母的秩序。

将元素A和B分别具有1和2的z分度，无论A的子节点是多少，无论z-index在B下出现多高，IE7 / 8对此都非常严格。

<强> JSFiddle