重疊fontawesome圖標輸入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>

使用鏈接而不是按鈕可以解決您的問題。