Question

我正在努力解决一个小问题，问题本身看起来很简单，但它正在浪费我的时间。我有一个搜索输入字段，左侧有搜索图标。我已将搜索图标作为背景图像并将图标放在左侧设计上，看起来很完美，但问题是当我在文本字段中输入长文本时它与搜索图标重叠。我已经给出了填充让在文本字段中，它是在Chrome，Mozilla和IE10等现代浏览器中运行良好的一些功能，但在IE8中却出现了同样的问题。请查看以下代码我写的内容。

.search-box {
line-height: 17px;
width: 250px;
background: url(../images/sprite-img-repeat.png) 0 -25px no-repeat #fff;
margin-right: 8px;
padding: 3px 0px 3px 25px;
border: 1px solid #b0b0b0;
color: #545454;
}

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

我还提供了一个信息，它具有输入的自动完成建议功能。我无法在此处添加屏幕截图，因此您需要至少10个信誉才能发布图片。关于如何在IE8上完成这项工作的任何建议。提前谢谢。

Answer 1

如果您要发布关于搜索栏的整个代码会很棒，因为这样就不容易理解您是如何创建结构的，但从我的理解看起来您正在给出搜索输入字段图标背景，我是对的。

如果是这种情况，则必须更改要在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>

图标不应该是搜索字段中的背景图片，它应该是单独的，您可以使用文本img替换它。

CSS

.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
}

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

1 个答案: