透明覆盖 div 允许在 IE 7,8 中点击答案

【问题标题】：Transparent overlay div allows click trough in IE 7,8透明覆盖 div 允许在 IE 7,8 中点击
【发布时间】：2011-10-15 19:33:01
【问题描述】：

我有一个包含表单元素的 div，并且我使用了一个不可见的覆盖掩码，它应该覆盖我的容器。但是没有背景的 IE 7 和 8（错误地）允许点击低谷。

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

示例标记：

<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/

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

【问题讨论】：

标签： jquery css internet-explorer-8 internet-explorer-7 overlay

【解决方案1】：

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

【讨论】：

这很好用。在 IE、Chrome 或 FF 中未发现任何 404 错误。

【解决方案2】：

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

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

【讨论】：

谢谢。即使图像不存在，它也可以工作，因此您可以在 url 中输入任何废话:-)

【解决方案3】：

虽然我不明白您为什么要覆盖 from 元素，但您是否考虑过使用完全透明的 1x1px PNG 作为覆盖背景？

【讨论】：

You should use a bigger size than 1x1.
表单元素仅用于预览。如果没有覆盖，如果我从表单元素开始拖动，我将无法对项目进行排序。无论如何，谢谢，我稍后会尝试这些建议。
从来没有这个问题。我什至尝试了给定链接上的演示，IE8 对应该失败的 1x1 图像演示没有任何问题。