隠しファイルの入力要素がIEエッジで機能しない

Question

通常、browse...の代わりにアイコンをクリックしてアップロード処理を開始すると、次のように作成されました。 Chrome、FireFoxで動作し、Edge以外の古いバージョンのIE（Internet Explorerのドキュメントモードを使用してテスト済み）を使用しています。アイコンがクリックされるとIE Edge上で何も起こりません。

Chrome、Firefox、IE Edge、少なくともIE 10および9で動作させるにはどうすればよいですか？

結果：https://jsfiddle.net/sk5cg2wy/

/* Upload Photo */ 
 

 
.upload-wrapper { 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 0 auto; 
 
} 
 

 
.upload-wrapper img { 
 
    width: 250px 
 
    height: 280px; 
 
    cursor: pointer; 
 
} 
 

 
.upload-wrapper input { 
 
    display: none; 
 
}

<!-- start upload wrapper --> 
 
<div class='upload-wrapper'> 
 
    <form enctype='multipart/form-data' action='photo_setup.php' method='POST'> 
 
    <label for='file-input'> 
 
     <img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'> 
 
    </label> 
 
    <input type='file' name='photo' id='file-input' accept='image/*'> 
 
    </form> 
 
</div> 
 
<!-- end upload wrapper -->

Answer 1

IE-エッジの奇妙な挙動は、これが存在していることを知りませんでした。

ラベルに画像を追加しようとすると、background-imageと表示され、IE-Edge（Windows 7）でテストしました。

JSFiddle

HTML：

<!-- start upload wrapper --> 
<div class='upload-wrapper'> 
    <form enctype='multipart/form-data' action='photo_setup.php' method='POST'> 
     <label for='file-input'> 
     <!--<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>--> 
     </label> 
     <input type='file' name='photo' id='file-input' accept='image/*'> 
    </form> 
</div> 
<!-- end upload wrapper --> 

CSS： /*写真をアップロード*/

.upload-wrapper { 
    width: 250px; 
    height: 250px; 
    margin: 0 auto; 
} 

.upload-wrapper img { 
    width: 250px 
    height: 280px; 
    cursor: pointer; 
} 

[for="file-input"] { 
    display: block; 
    background-color: #ddd; /*as fallback*/ 
    background: url(http://i.imgur.com/MIY6LmH.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 250px; 
    height: 250px; 
} 

.upload-wrapper input { 
    display: none; 
} 

Answer 2

@Konrudが既に回避策を書いたが、それは解決しない/説明実際の問題。私が分析した限りでは、ラベルはブロック要素ではないためスペースがないので動作しません。 Edgeは実際に正しく動作しています。表示ブロックを追加すると、正常に動作する他のブラウザでも表示されます。

label { 
    display: block; 
}