Html 如何保持输入文本字段的搜索图标不与ie8中的文本和图标重叠？

我正在为一个小问题挣扎，这个问题本身看起来很简单，但它正在消耗我的时间。 我有一个搜索输入字段，左侧有搜索图标。我将搜索图标作为背景图像，并将图标放在左侧，从设计角度看，它看起来很完美，但问题是当我在文本字段中输入长文本时，它与搜索图标重叠。我将填充设置为文本字段，这在Chrome等现代浏览器中运行良好，mozilla和IE10，但在IE8中，它给出了相同的问题。请检查下面我写的代码

。搜索框{
线高：17px；
宽度：250px；
背景：url（../images/sprite img repeat.png）0-25px不重复#fff；
右边距：8px；
填充：3px0px 3px25px；
边框：1px实心#b0；
颜色：#5454；
}

---

如果您要发布有关搜索栏的全部代码，那就太好了，因为这样不容易理解您是如何创建结构的，但从我的理解来看，您似乎给了搜索输入字段图标背景，对吗

如果是这种情况，那么您必须更改ie8中使用的结构

<div class="search-box">
  <div class="icon">icon</div>
  <input name="search" type="text" id="searchTextBox" class="-search-box ui-autocomplete-input" placeholder="Search..." autocomplete="off">
</div>

.search-box {
  overflow:hidden;
}
.icon{
  text-indent:-9999px;
  float:left;
  background: url(../images/sprite-img-repeat.png) 0 -25px no-repeat #fff;
  width: "width of icon"
  height: "height of icon"
}
.search-box {
line-height: 17px;
width: 250px;
margin-right: 8px;
padding: 3px 0px 3px 25px;
border: 1px solid #b0b0b0;
color: #545454;
float:right or left
}