2012-02-17 4 views
0

私は2つの入力を持っています...テキストフィールドと送信ボタン。私は両方のCSSでカスタム背景画像を使用しています。画像の高さはいずれも18pxです。 Chromeでは、ボタンはテキストフィールドよりもわずかに低く表示されます。 firefoxでは、それはスポットライトです。カスタムグラフィックスを使用しているときにChrome/Firefoxで送信ボタンの配置が異なるのはなぜですか?

私が使用しているCSSは次のとおりです。

.search-field {background: url('search-field.png') no-repeat transparent!important; width: 117px!important; height: 18px!important; border: none!important; margin-right: -7px!important; } 

.search-button {background: url('search-button.png') no-repeat transparent!important; width: 16px!important; height: 18px!important; border: none!important; text-indent: -9999!important; text-transform: capitalize!important;} 

私が使用しているHTMLは次のとおりです。

<div class="search"> 

    <input class="search-field" type="text" /> 
    <input class="search-button" type="submit" value="" /> 

</div> 

以下のスクリーンショットはChromeからです。私はフィールドのCSSを調整した後にChromeで修正することができるようですが、逆にFFで壊れます。

Chrome Screenshot

+0

あなたのHTML&それが何をしているかのスクリーンショットを提供していただけますか?あなたはそれを引き起こしているものを見るために検査員を見ましたか? –

+0

ChromeからのHTML/screenshotに関する質問が更新されました。私は正確にそれを引き起こしているのか分かりません。私はクロームでの位置で修正することができます:相対および上:-4px;しかしそれは逆の方法でそれをFFで分解する。 – binaryorganic

答えて

2

は、このことができます願ってい..フィドルを確認してください。.. http://jsfiddle.net/mvivekc/XNNAW/

+0

うわー!ありがとう!両方のブラウザでそれを修正しました。何が起こっているのか説明できますか?私はそれを理解できますか?ボタンとディスプレイの高さの変更(ブロックと浮動小数点)が表示されていますが、問題を解決する理由はまだわかりません。あなたが1秒を見つけてそれを説明できるなら、私はずっと義務づけられています! – binaryorganic

関連する問題