IEを入力するためのフォントワームの重複アイコン

Question

入力にフォントの驚くばかりのアイコンが重なり合ってしまいます。これは、ボタン自体をアイコンにしたいからです。

私のソリューションは、FirefoxとChrome、でうまく動作しますが、それはIEでは動作しません。つまり、IEではボタンがクリック可能になりません。アイコンがボタンの上に表示されるためです。

これはHTMLです：

<span> 
    <input type="button"/> 
    <i class="fa fa-camera-retro"></i> 
</span> 

はCSS：

span { 
    position: relative; 
} 

input { 
    position: relative; 
    background: none; 
    border: none; 
    z-index: 2; 
    cursor: pointer; 
} 

i { 
    position: absolute; 
    left: 0; 
} 

奇妙なことは、このコードはJSFiddleにうまく機能していることです。

更新日：入力を使用する必要があります。

Answer 1

あなたは（たとえば、フォームのような）ボタンが必要な場合は、使用することができます。また

<button><i class="fa fa-camera-retro"></i></button> 

、あなたは絶対に必見は、入力要素のボタンを持っている場合は、入力を指しているラベルを使用してみてください：

<span> 
    <input id="myButton" type="button"/> 
    <label for="myButton" class="fa fa-camera-retro"></label> 
</span> 

Answer 2

はこれを試してみてください：リンクの代わりに、ボタンを使用して<a href = "#"><i class="fa fa-camera-retro"></i></a>

はあなたの問題を解決する可能性があります。