Firefoxはテキストフィールドの上に余分なピクセルを追加します、それを削除する方法は?

cross-browser css firefox textfield
Firefoxはテキストフィールドの上に余分なピクセルを追加します、それを削除する方法は?

このページのような検索バーを作成したいhttp://dl.dropbox.com/u/333492/search/form.html

クロム、オペラ、またはサファリでそのページをロードすると、検索バーは(Macでテスト済み)のように見えます。 ただし、Firefox(少なくともMacのff 3.5および3.6でテスト済み)を使用すると、テキストフィールドの上に1ピクセル追加されるため、テキストフィールドはボタンより1ピクセル低くなります。 looksいですね。

考えられるすべての境界線とパディングを削除しようとしましたが、問題は解決しません。 また、検索ボタンが表示されていない場合は発生しません。

誰かがこの動作を引き起こしている可能性について何か考えを持っていますか? または、さらに良いことに、誰かがそのページのCSSを変更して、問題を解決できるでしょうか?

  3  0


ベストアンサー

私はついに問題の原因を説明し、状況を部分的に修正する答えを提案するブログ投稿を見つけました。 Twitterの@anttisykariに感謝します!

したがって、正しい答えは次の行をCSSに追加することです。

 input[type="submit"]::-moz-focus-inner {border:0;} /* ff specific stuff, yuck*/
 input[type="submit"]:focus {background:#333;} /* change accordingly depending on your button bg color, this fixes the focus problem when using keyboard to move betweenform elements */

ただし、IE8はまだフォームを壊したので、これらを両方の入力要素に追加する必要がありました。

 display: block;
 position: relative;
 float: left;

今ではすべてが大丈夫のようです。

3


タイトルとURLをコピーしました