Lớp phủ trong suốt div cho phép máng nhấp chuột trong IE 7,8

Question

Tôi có một div chứa các phần tử biểu mẫu và tôi đang sử dụng mặt nạ lớp phủ vô hình, che phủ vùng chứa của tôi. Nhưng không có nền IE 7 và 8 (không chính xác) cho phép máng nhấp chuột.

Giải pháp tôi tìm thấy, là sử dụng màu nền trên div lớp phủ với độ mờ 0,1. Đây là một phần hoạt động, nhưng trong trường hợp của tôi, các phần tử thùng chứa là các mục có thể sắp xếp và khi tôi bắt đầu sắp xếp, các phần tử biểu mẫu sẽ hoạt động lạ (chỉ khi tôi đang sử dụng tùy chọn độ mờ trên jquery cũng được)

mẫu Markup:

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

Trực tiếp trên http://jsfiddle.net/CmU59/4/

Bất kỳ đề xuất giải pháp nào khác?

Answer 1

Mặc dù tôi không hiểu tại sao bạn muốn che phủ các yếu tố của mình nhưng bạn đã cân nhắc sử dụng PNG 1x1px trong suốt làm nền lớp phủ của mình?

Answer 2

chỉ cần đặt background: url(image/url.jpg) no-repeat -999px -999px; và loại bỏ độ đục ...

tôi đề nghị bạn sử dụng hình ảnh nhỏ ... nhưng không 1x1 pixel ... 1x2 sẽ được tốt ... demo

Answer 3

background: url (about: blank) có thể là lựa chọn tốt ~~