html - 叠加fontawesome图标输入IE

Question

我想让 Font Awesome 图标与输入重叠。这是因为我希望按钮本身就是图标。

我的解决方案在 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>