Bộ lọc gradient của trình duyệt IE không phản hồi sự kiện nhấp chuột

Question

Tôi muốn có màu nền trong suốt và tôi sử dụng bộ lọc gradient làm dự phòng của RGBA trong IE. Mã này giống như sau:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff,endColorstr=#bfffffff); 

Tôi cũng muốn kích hoạt sự kiện khi người dùng nhấp vào nền, nhưng có vẻ như sự kiện nhấp chuột không được kích hoạt sau khi tôi đặt bộ lọc. Mọi thứ đều ổn mà không có bộ lọc.

Vì vậy, nó là một lỗi IE khác? Làm thế nào tôi có thể giải quyết vấn đề?

Answer 1

Điều này có thể liên quan đến lỗi IE khiến cho liên kết với nền trong suốt không còn có thể nhấp nữa: Tôi đã xem qua nó ngay hôm nay. Tôi đã có một liên kết với một nền trong suốt và hiển thị thiết lập để chặn: khu vực chính của liên kết không thể nhấp được, nhưng một biên giới 10px tôi đặt trên nó được. Dường như IE cũng có vấn đề với bộ lọc.

Loại lỗi này được thảo luận here và here. Giải pháp của anh chàng đầu tiên là đưa hình nền giả vào phần tử trước khi thiết lập bộ lọc. Người thứ hai là cung cấp cho phần tử một màu nền và đặt độ mờ thành 1%, điều này sẽ làm cho nó trở nên vô hình trong IE. Hy vọng rằng bạn sẽ có thể nhận được vòng nó bằng cách sử dụng một trong những.

Answer 2

Đây không phải là giao dịch. Internet explorer tạo bộ lọc trên một lớp riêng biệt được đặt phía trên phần tử của bạn và vì lớp đồ họa mới không phải là một phần của phần tử - mà bạn có sự kiện nhấp vào - sẽ không có sự kiện bong bóng.

Gần đây tôi đã tạo thành phần nhãn với bộ lọc gradient đẹp cho IE. Chỉ có thể nhấp vào văn bản. Nếu tôi phân tích các lớp nhãn từ bên có và không có lớp gradient, thì bạn sẽ hiểu được vấn đề.

without gradient filter: 

------------------ 
text layer 
------------------ 
background layer 
------------------ 


with gradient filter: 

------------------ 
text layer 
------------------ 
gradient layer 
------------------ 
background layer 
------------------ 

Nhân tiện, đó là lý do tại sao bạn không thể đặt bán kính đường viền trên bộ lọc gradient. Thử nó. Tạo một phần tử, và tạo kiểu cho nó với bán kính đường viền và cho nó một bộ lọc gradient và chạy nó trong IE 9. Không có vấn đề làm thế nào bạn cố ép gradient nằm bên trong đường viền tròn - với ví dụ: overflow: hidden -, nó sẽ không bao giờ tuân theo. Nó giống như một phần tử riêng biệt được định vị tuyệt đối và ngay trên phần tử của bạn để che nó lên và ngay bên dưới văn bản.