Làm thế nào để ngăn chặn sự cố rò rỉ thông qua một phần tử lớp phủ trong IE?

Question

Với HTML sau:

<div class="with-shield"> 
    <div class="shield"></div> 
    <input type="radio"/> 
</div> 
​ 

... và CSS:

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 
} 

(Fiddle).

FireFox và Chrome không cho phép bạn nhấp vào nút radio (như .shield được đặt ở trên cùng), tuy nhiên IE9 (và tôi giả định phiên bản cũ hơn) (mặc dù công cụ nhà phát triển hiển thị .shield được đặt đúng vị trí) .

Làm thế nào tôi có thể thay đổi CSS để cho .shield hấp thụ sự kiện nhấp chuột (tức là để ngăn chặn người dùng có khả năng chọn radio) trong IE?

tôi cần điều này như tôi trình bày các kết quả của một khách hàng khảo sát cho nhân viên, đơn giản bằng cách tái hiển thị dạng xem biểu mẫu; Tôi muốn thêm một lớp phủ để ngăn chặn các nhân viên thay đổi vô tình các giá trị (tôi đã vô hiệu hóa tabIndex v.v.).

Answer 1

Bit muộn, nhưng làm một cái gì đó như thế này:

#BlockAction{bottom: 0; left: 0; position: absolute; top: 0; right:0; z-index: -1;} 
#BlockAction.Blocked{z-index: 1000; cursor:wait;background-color:#fff;opacity:0} 

Màu nền và độ mờ đục sẽ phục vụ cho IE9 cho phép nền trong suốt nhấp chuột phải trải qua. Các trình duyệt khác nắm bắt được nhấp chuột mà không có nó.

Answer 2

Vừa gặp sự cố tương tự. Muthu Kumaran của là rất tốt, ngoại trừ việc nó không chiếm IE < 8. Đây là cách bạn có thể làm điều đó:

.with-shield { 
    position: relative; 
} 

.shield { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 

background-color:#fff; 
opacity:0; 
filter: alpha(opacity = 001); 

} 

Đáng tiếc là không phải jsfiddle cũng không jsbin đang chạy đúng trên IE8 vì vậy tôi có thể cho bạn, nhưng tôi đã tạo ra một trang thử nghiệm trong máy cục bộ của tôi và được kiểm tra và nó hoạt động như mong đợi.

Answer 3

Và thậm chí sau đó để đảng, nhưng đây là những gì tôi đã làm:

Chỉ cần sử dụng một mã hóa base64 của một pixel 1x1 GIF trong suốt làm nền, điều này dừng tất cả các nhấp chuột/vòi (cũng đã thử nghiệm trên IE9 và IE8).

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);