透明覆蓋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

回答

相關問題