透明叠加div允许IE 7,8中的点击槽

Question

我有一个包含表单元素的div,我使用的是一个隐形覆盖面膜,它应该覆盖我的容器.但没有背景IE 7和8(错误地)允许点击槽.

我发现的解决方案是在叠加div上使用0.1不透明度的背景颜色.这部分有效,但在我的情况下,容器元素是可排序的项目,当我开始排序时,表单元素表现得很奇怪(只有当我在jquery sortable上使用opacity选项时)

样品加价:

<div class="sort">
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <input type="text" value="Some" name="test" id="test" />
    </div>
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <select value="Some" name="test2" id="test2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </div>
</div>

CSS:

.cont {
    width: 300px;
    position: relative;
    background-color: #aaa;
    padding: 10px;
    margin: 10px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.1;
    filter: alpha(opacity=0.1);
}

使用Javascript:

$(function() {
    $('.sort').sortable({opacity:0.8});
});

住在http://jsfiddle.net/CmU59/4/

还有其他解决方法吗？

Answer 1

虽然我不明白为什么你想要覆盖你的元素你是否考虑使用完全透明的1x1px PNG作为叠加背景？

Answer 2

background:url(about:blank)也许是个不错的选择~~

Answer 3

只需放入background: url(image/url.jpg) no-repeat -999px -999px;并移除不透明度......

我建议你使用小图片...但不是1x1像素...... 1x2会很好...... 演示