入力ファイルが開かないIEのファイルアップロードボックス

私はと一緒にを2つのspan要素で挟んだlabel要素を持っています。入力ファイルが開かないIEのファイルアップロードボックス

input自体はdisplay:noneと宣言され、labelは、その中の要素がクリックされたときにファイルアップロードボックスを起動することができます。これは、もちろん、IEを除くすべての主要なブラウザでうまく動作します。 IEでは、imgよりlabel他内の任意の場所をクリックすると、ファイルのアップロードボックスを起動しますが、imgをクリックすると...

あなたは、この問題が他のブラウザと並んでIEでthis fiddleを開くことによって複製見ることができません。

不思議なことに、問題がformの存在にまで単離することができます。 formラッパーが正しくラベル機能を除去して、いくつかの理由。私は明らかに解決策としてこれを使用することはできません。思考？

出典

2017-10-31 Tom

を参照してください、あなたは背景画像とのスパンに 'paperclip'を変えることができます。これは動作しますが、[更新フィドル]（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; 
}

は、回避策としてupdated JSFiddle

出典

2017-11-03 21:16:41

入力ファイルが開かないIEのファイルアップロードボックス

答えて

関連する問題