CSSポジションの問題

Question

イブニング、

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、1ピクセルの境界線が画像の一部ではなく、CSSでhttp://img267.imageshack.us/img267/6779/searchr.png！）

トップバージョンはレンダリングされる方法を示し、下の図はそれがどのようにACであるかを示していますすべての仲間で、時折レンダリングされます。それは、想定されているより2倍高いです。なぜそれがこれをやっているのか分かりません。

ありがとうございました。

Answer 1

は、あなたの入力は（以前？）インラインスタイルに影響されるので、これは動作するはずですinput.search { ... }にvertical-align:topを試してみてくださいラインにmargin: 7px 0 0 7px;

Answer 2

を削除してください。

display:inline-blockでスタイルを設定した要素で操作するのは簡単で、ブラウザでうまくサポートされています（IE 7は小さなハックが必要です。IE 6はすでに無効になっているはずです）。