Google Chrome（テキストボックスとボタン）のCSSの問題

Question

Chromeの下で正しく表示されないテキストボックスとボタンの位置に問題があります。

ここでは、各ブラウザの例を示します。Chromeの下にあるテキストボックスが非表示になっていることがわかります。

のInternet Explorer/Firefoxの

クローム

HTML：

<div id="divSearch"> 
    <input type="text" id="txtSearch" placeholder=" Search..."/> 
    <input type="submit" id="btnSearch" value=""/> 
</div>` 

CSS：

input[type=text]{ 
    width: 200px; 
    height: 24px; 
    border: none; 
    border-radius: 3px 0px 0px 3px; 
    -webkit-border-radius: 3px 0px 0px 3px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    padding: 0; 
} 

input[type="submit"]{ 
    border: none; 
    border-radius: 0px 3px 3px 0px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -webkit-border-radius: 0px 3px 3px 0px; 
    width: 32px; 
    height: 24px; 
    background: url(../img/search_button.png) no-repeat; 
    background-color: white; 
    background-position: 10px 5px; 
} 

#divSearch{ 
float: right; 
width: 300px; 
height: 40px; 
white-space: nowrap; 
margin-right: 50px; 
} 

ここで、高さをinput[type="submit"]から削除すると、ボタンのサイズが間違っていることを除いて、位置付けが正しくなります。

ボタンの高さが問題を引き起こし、なぜ私がうまくできません。どのようにそれを修正するためのアドバイス？

ありがとうございました

Answer 1

次のコードを追加してください。それは動作するはずです：

input[type=text]{ 
    float:left 
} 
input[type=text]{ 
    float:left 
} 

Answer 2

これを解決するには、ボタンの値を空にしてください。

<input type="submit" id="btnSearch" value="&nbsp;"/> 

原因はボタンにテキストベースラインがないことです。