如何保持輸入文本字段的搜索圖標與ie8中的文本和圖標不重疊？

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，它應該是獨立的，可以使用文本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 
}