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

我有一个包含表单元素的div，我使用了一个隐藏的覆盖掩码，它应该覆盖我的容器。但没有背景IE 7和8（不正确）允许点击槽。透明覆盖div允许在IE中点击槽7,8

我发现的解决方案是在覆盖div上使用0.1不透明度的背景色。这是部分工作，但在我的情况下，容器元素是可排序的项目，当我开始排序时，表单元素是奇怪的行为（只有当我使用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/

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

来源

2011-07-29 dioslaska

虽然我不明白你为什么要覆盖你的元素你有没有考虑过使用完全透明的1x1px PNG作为覆盖背景？

来源

2011-07-29 09:38:28 brezanac

[你应该使用比'1x1'更大的尺寸。]（http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug /） – thirtydot

表单元素仅供预览。如果我从表单元素开始拖动，如果没有重叠，我无法对项目进行排序。无论如何，我会立即尝试这些建议。 – dioslaska

从来没有这个问题。我甚至在给定的链接上尝试过这些演示，并且IE8在应该失败的1x1图像演示中没有问题。 – brezanac

只是把background: url(image/url.jpg) no-repeat -999px -999px;，并删除不透明度...

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

来源

2011-07-29 09:43:27 Reigel

谢谢。即使图像不存在，它也可以工作，所以你可以在网址中输入任何废话:-) – user712092

背景：网址（约：空白）也许是一个不错的选择~~

来源

2013-12-17 08:15:33 ekincrue

这很有效。在IE，Chrome或FF中没有看到任何404错误。 –

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

回答

相关问题