입력 파일이 열리지 않습니다. IE의 파일 업로드 상자

해당 input type="file"과 함께 label 요소가 있으며 img이 두 개의 span 요소 사이에 끼어 있습니다.입력 파일이 열리지 않습니다. IE의 파일 업로드 상자

input 자체는 display:none으로 선언되어 있으므로는 그 안에있는 요소가 클릭되면 파일 업로드 상자를 시작하는 작업을 수행 할 수 있습니다. 이것은 물론 IE를 제외한 모든 주요 브라우저에서 원활하게 작동합니다. IE에서 img보다 label다른의 아무 곳이나 클릭하면 파일 업로드 상자를 시작하지만, 클릭합니다 img하지 않습니다 ... 당신은 어떤 다른 브라우저와 함께 IE에서 this fiddle를 열어 복제이 문제를 볼 수 있습니다

이상하게도 문제는 form의 존재로 격리 될 수 있습니다. form 랩퍼를 제거 할 때 어떤 이유로 레이블이 올바르게 작동합니다. 분명히 해결책으로 이것을 사용할 수는 없습니다. 생각?

출처

2017-10-31 Tom

updated JSFiddle를 참조하십시오. 이 작업은 [업데이트 된 바이올린] (https://jsfiddle.net/MrLister/de531suo/6/)을 참조하십시오. 그것은 해결책이 아니므로 답변으로 게시하지 마십시오. –

@MrLister 고마워. 내 코드에서 복제 할 수 있으며 사실상 해결 방법으로 제대로 작동합니다. 당신이 말했듯이, 그것은 해결책이 아닙니다. – Tom

잘 IE는 사양에 맞게 라벨에 img 태그가 포함 된 요소를 포함 할 수 없습니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label –

그것은 당신이 해결하기 위해 단순히 클릭 될 때 이미지를 강조하기 위해 일부 브라우저가 발생할 수 있습니다 <img>

에 pointer-events: none;를 추가 Microsoft Connect

에서 볼 수 IE에서 알려진 버그입니다. 이를 방지하려면 이미지를 선택 취소하십시오.

전체 솔루션입니다 :

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

는 배경 이미지와 범위에`paperclip`을 설정할 수 있습니다,이 문제를 해결

출처

2017-11-03 21:16:41

입력 파일이 열리지 않습니다. IE의 파일 업로드 상자

답변

관련 문제