Hauteur différente sur Chrome

Bonjour,

Je suis actuellement entra inde faire un site, et dans le Header, j'ai une barre de recherche qui se compose d'un input Search et d'un input Image.

      
<form action="">
        <input class="recherche-box" type="search" placeholder="recherche" name="recherche">
        <input class="recherche-envoyer" type="image" src="images/recherche.png" value="" />
      </form>

Cette barre est personnalisé :

#recherche {
	width: 100px;
	left: 255px;
	height: 25px;
	position: absolute;
	margin-top: 12px;
}
#recherche form {
	display: inline;
}
.recherche-box {
	width: 300px;
	font-size:12px;
	height:27px;
}
.recherche-envoyer {
	position: absolute;	top: 0px;
	left: 300px;
	width: 15px;
	height: 15px;
	padding: 6px;
	background-color: #343432;
}

Sur chrome vu que je code avec, il n'y a pas de problème
http://nsa33.casimages.com/img/2013/07/12/130712105259461743.jpg

Par contre sur Ie et firefox
http://nsa33.casimages.com/img/2013/07/12/130712105331358822.jpg

je ne voit pas pourquoi 27px de hauteur est comprit différemment selon les navigateur ?
Si quelqu'un aurait une solution ?

Merci, Jeason