HTML圖像輸入元素更改div內其他元素的垂直佈局

Question

我在div（文本框和圖像）中有兩個輸入元素，打算看起來像一個搜索欄，在框的邊框內放置一個放大鏡提交圖標。當我註釋掉圖像輸入時，文本框完全位於div內。當我取消註釋圖像輸入時，文本框向下移動幾個像素。關於添加導致文本框轉移的圖像元素是什麼？

HTML：

<div id="top_search_box"> 
    <input type="text" name="keywords" id="keywords" value="Search this site" size="15" maxlength="80"/> 
    <input type="image" id="search_button" src="images/layout/search_icon.png" alt="Submit" 
         name="submit" value="Submit"/> 
</div> 

CSS：

#top_search_box { 
    border: 1px solid #dedede; 
    height: 25px; 
    margin: 4px 0; 
    padding: 4px 0; 
} 

#top_search_box #search_button { 
    height: 24px; 
    width: 33px; 
} 

#top_search_box #keywords { 
    width: 190px; 
    height: 24px; 
    border: 0; 
    padding: 0; 
} 

Answer 1

這就是我該怎麼做的。

HTML

<input type="submit" value="Submit" /> 

CSS

#top_search_box input[type=submit]{ 
    background: url(images/layout/search_icon.png) no-repeat; 
    height: 24px; 
    width: 33px; 
    padding: 0; 
    margin: 0; 
    text-indent: -9999em; 
} 

對於IE瀏覽器，你可能要設置提交按鈕 「」

的價值我假設你不希望重疊圖像的輸入值。如果這樣做，只需刪除文本縮進。

Answer 2

它可能是不同的輸入之間的差異保證金，使用好CSS Reset。