透明覆盖层div在IE 7、8中可点击。

Question

我有一个包含表单元素的div，并且使用了一个不可见的覆盖层，该覆盖层应该覆盖我的容器。但是在没有背景的情况下，IE 7和8（不正确地）允许点击穿透。

我找到的解决方案是在覆盖层div上使用0.1不透明度的背景颜色。这部分起作用，但在我的情况下，容器元素是可排序项目，当我开始排序时，表单元素会表现奇怪（仅当我也在jquery sortable上使用不透明度选项时）。

示例标记：

<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/上实时演示。

还有其他解决方案建议吗？

- istvan.halmen

Answer 1

虽然我不明白为什么你想要覆盖你的表单元素，但你考虑过使用完全透明的1x1像素PNG作为你的覆盖背景吗？

- user188654

---

你应该使用比 1x1 更大的尺寸。 - thirtydot

表单元素仅用于预览。如果我从表单元素开始拖动，没有覆盖层，我无法对项目进行排序。无论如何，谢谢，我马上尝试建议的方法。 - istvan.halmen

从来没有遇到过这个问题。我甚至尝试了给定链接上的演示，并且IE8在本应失败的1x1图像演示中也没有出现问题。 - user188654

Answer 2

背景：url（about:blank）可能是一个不错的选择~~

- ekincrue

---

这个很好用。在IE、Chrome或FF中没有看到任何404错误。 - cage rattler

Answer 3

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

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

- Reigel Gallarde

---

谢谢。它可以在图像不存在时工作，因此您可以在URL中输入任何无意义的内容 :-) - user712092