Przezroczysta nakładka div pozwala na kliknięcie w IE 7,8

Question

Mam element div zawierający elementy formularza i używam niewidocznej maski nakładki, która powinna pokrywać mój kontener. Ale bez tła IE 7 i 8 (niepoprawnie) pozwala na kliknięcie.

Rozwiązaniem, które znalazłem, jest użycie koloru tła na nakładce div z 0,1 kryciem. To działa częściowo, ale w moim przypadku elementy kontenera są elementami sortowalnymi, a kiedy zaczynam sortowanie, elementy formularza działają dziwnie (tylko, gdy używam opcji krycia w jquery do sortowania)

Markup

Próbka:

<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}); 
}); 

Na żywo http://jsfiddle.net/CmU59/4/

Wszelkie inne sugestie dotyczące obejścia problemu?

Answer 1

Mimo że nie rozumiem, dlaczego chciałbyś pokryć swoje elementy, czy rozważałeś użycie w pełni przezroczystego pliku PNG 1x1px jako tła nakładki?

Answer 2

wystarczy umieścić background: url(image/url.jpg) no-repeat -999px -999px; i usunąć krycie ...

Proponuję użyć małego obrazka ... ale nie ... 1x2 1x1 pikseli będzie dobry ... demo

Answer 3

background: url (about: blank) może być dobrym wyborem ~~