Tệp đầu vào không mở hộp Tải lên tệp trên IE

Question

Tôi có thành phần label, cùng với input type="file" tương ứng, cũng chứa img kẹp giữa hai phần tử span.

Bản thân số input được tuyên bố là display:none, cho phép label thực hiện công việc khởi chạy hộp Tải tệp lên khi bất kỳ phần tử nào bên trong nó được nhấp. Điều này, tất nhiên, hoạt động bơi lội trong mọi trình duyệt chính ngoại trừ IE. Trong IE, nhấn bất cứ nơi nào bên trong labelkhác hơn img sẽ khởi chạy hộp File Upload, nhưng cách nhấn vào img sẽ không ...

Bạn có thể thấy vấn đề này nhân rộng bằng cách mở this fiddle trong IE cùng với bất kỳ trình duyệt nào khác.

Điều kỳ lạ là vấn đề có thể được phân lập thành sự hiện diện của form. Vì một số lý do khi trình bao bọc form bị xóa các chức năng nhãn chính xác. Tôi rõ ràng không thể sử dụng điều này như một giải pháp mặc dù. Suy nghĩ?

Answer 1

Đó là một lỗi được biết đến trong IE bạn có thể nhìn thấy nó trong Microsoft Connect

Để giải quyết chỉ cần thêm pointer-events: none; đến <img>

Nó có thể gây ra một số trình duyệt để làm nổi bật hình ảnh khi được nhấp. Để tránh điều đó làm cho hình ảnh không thể chọn được.

Các giải pháp đầy đủ là:

.selector-for-image { 
    pointer-events: none; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Xem updated JSFiddle