Firefox ajoute un pixel supplémentaire en haut d'un champ de texte, comment l'enlever?

Question

Je veux créer une barre de recherche comme un dans cette page http://dl.dropbox.com/u/333492/search/form.html

Si vous chargez cette page avec Chrome, Opera ou Safari, la barre de recherche ressemble à elle devrait (testé sur mac). Cependant, si vous utilisez firefox (testé au moins avec ff 3.5 et 3.6 sur mac), vous verrez qu'un pixel supplémentaire est ajouté au dessus du champ de texte, et donc le champ de texte est inférieur d'un pixel au bouton, qui a l'air moche.

J'ai essayé d'enlever toutes les frontières possibles et les rembourrages mais le problème persiste. J'ai également remarqué que cela ne se produit pas lorsque le bouton de recherche n'est pas là.

Est-ce que quelqu'un a une idée de ce qui pourrait causer ce comportement? Ou, encore mieux, quelqu'un peut-il modifier le CSS sur cette page pour que le problème soit résolu?

Answer 1

J'ai finalement trouvé un billet de blog qui explique la cause du problème et propose une réponse qui corrige partiellement la situation. Merci @anttisykari sur Twitter!

http://christophzillgens.com/en/articles/equal-height-input-and-button-elements-in-firefox-and-safari

La réponse correcte est d'ajouter des lignes suivantes à la 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 */ 

Cependant, IE8 encore cassé ma forme, donc je devais ajouter à la fois des éléments d'entrée.

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

Maintenant tout semble aller bien.