html - 在 IE 中通过文本删除重叠的输入图标

Question

截图示例：

款式：

padding-left: 40px;
background: url(../images/ico_03.png) no-repeat 11px 12px #f9f8f6;

问题：

我希望文本不会与图标重叠，就像在普通浏览器中一样:)

Answer 1

我建议你这样尝试：

标记：

<div class="input"> 
    <div class="input-icon">&nbsp;</div>
    <input type="text" />
</div>

CSS：

div.input{
   position:relative;
}

div.input-icon{
   left: 40px;
   background: url(../images/ico_03.png) no-repeat 11px 12px #f9f8f6;
   position:absolute;
   z-index:2;
   top:0;
}

div.input input{
   padding-left:50px;
   position:relative;
   z-index:1;
}