在IE7下为li元素放置一个div掩码

Question

我遵循 Dom 结构，在 IE7 中似乎无法获得我想要的效果（其他浏览器似乎工作正常，即使在 IE8 中也是如此）

.wrap {
    margin: 10px 10px 0 0;
}
.mask {
    position:absolute;
    top: 30px;
    width:150px;
    height:150px;
    background-color:green;
    z-index: 5;
}
.list {
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    position:absolute;
    top: 5px;
}
.item {
    position: relative;
    width:100px;
    height:100px;
    background-color:blue;
}
.item.selected {
    position: relative;
    z-index: 100;
    background-color:red;
}

<div class="warp">
<div class="mask"></div>
<ul class="list">   
    <li class="item selected"></li>
    <li class="item"></li>
</ul>
</div>

有人可以帮我定义允许以下内容的 css 吗：

1. warp 有位置：相对
2. 掩码是位置：绝对并且在任何项目的顶部，但在选定的下方
3. list 也是 position:absolute

当我从列表中删除 position:absolute 和 top:5px 时，我设法让它正确显示，但我需要能够通过 top/left 属性放置列表。

有什么建议吗？

Answer 1

看起来 ul 用 ie 在这里碍事了。

让你的面具在 ul 中成为一个 li，它应该会很好用。

<div class="wrap">
<ul class="list">
    <li class="mask"></li>
    <li class="item selected"></li>
    <li class="item"></li>
</ul>
</div>

此外，“wrap”或“warp”类有一个错字。您可能需要为 .wrap 指定 position: relative 以确保列表的绝对定位在其中正确。