◆ label で input(file) と別の要素を囲んだ時
  ◆ IE は a タグだと動かない でも input(button) タグでも動く
  ◆ Chrome/Firefox は input(button) は動かないけど a タグは動く 

<label>
<input type="file" hidden/>
<span class="btn">ファイル選択</span>
</label>

こう書くと span のところをクリックしても input(file) がクリックされたことにして ファイル選択ダイアログを出すことができます


この span のところの要素が一部のものだと動かないのですが そこが IE11 とその他で違っています

input(file) の代わりに押すものなので 単純に input(button)
input が被って動かなそうな気がするので次にボタンぽい a

とりあえずこの span, a, input の 3 つで試してみると

demo

spanainput
Chrome/Firefox×
IE11×

Chrome と Firefox はまあ想像どおりです

IE11 はなぜか input でも動くのですが a タグが動きません

なぜ……