CSS位置問題

HTML：

<input type="text" class="search" value="Search"><input type="button" class="searchimg" value="Search" />

CSS：

input.search { 
    font-size: 1em; 
    color: #383838; 
    margin: 7px 0 0 7px; 
    padding: 3px; 
    border: 1px solid #969696!important; 
    background: #FEFEFE!important; 
    height: 16px; 
    width: 250px; 
} 

input.searchimg { 
    text-indent: -99999px; 
    width: 24px; 
    height: 24px; 
    display: inline; 
    background: url(../images/search.jpg) 0 0 no-repeat; 
    border: 0px; 
    margin: 7px 0 0 0; 
}

（search.jpg dimentions：24x24px，1px的邊界是圖像的一部分，而不是CSS http://img267.imageshack.us/img267/6779/searchr.png）

頂級版本顯示它應該如何渲染，底部圖片顯示了它是如何交流在所有的交響樂中都可以進行渲染。它比它應該高2px。我不確定它爲什麼這樣做。

謝謝。

來源

2012-01-15 Tom

也許試試'outline：0;'？ – motoxer4533 2012-01-16 00:04:44

我什麼也不害怕。 – Tom 2012-01-16 00:12:37

經過鉻15測試，並按預期工作。用另一個24像素x 24像素圖像替換搜索圖像。見http://jsfiddle.net/C4ayu/ – 2012-01-16 00:21:38

嘗試刪除線margin: 7px 0 0 7px;

來源

2012-01-16 00:07:38

這沒有效果。它仍然沒有正確渲染。 – Tom 2012-01-16 00:12:22

上input.search { ... }這個嘗試vertical-align:top應該工作，因爲你的輸入由（前？）內嵌樣式的影響。對於未來：使用display:inline-block樣式的元素更容易操作，並且它在瀏覽器中得到很好的支持（IE 7需要小小的破解，IE 6應該已經死了）。

來源

2012-01-16 00:17:58 veritas

它不會允許我回答我自己的問題，但我現在已更正此問題。已解決此問題。作爲參考：已通過編輯input.search類中的填充來更正爲 \t padding-top：5px; 謝謝。 – Tom 2012-01-16 00:20:44

回答

相關問題