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定义，它将允许以下内容：

warp有位置：亲戚
mask是position：absolute，位于任何项目之上，但低于所选项
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只是为了确保列表的绝对定位是正确的。

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

1 个答案: