Form button not aligned in Firefox - css

Question

I'm making a search bar with a button next to it.
The button is perfectly aligned with the search bar on Chrome and Opera, but on Firefox the button goes up by a couple of pixels.
I've tried to play with the padding and the margin but it don't seems to work.
Here's my code and what it looks like on Chrome and Firefox :
HTML :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/fontawesome.min.css" rel="stylesheet">
<form id="gameSearch" action="#">
<input type="text" name="game_search" maxlength="16" placeholder="Search...">
<button class="icon"><i class="fa fa-search"></i></button>
</form>
CSS :
button.icon {
margin-left: -5px;
background-color: #9b59b6;
border: 0 none;
color: white;
font-size: 25px;
width: 75px;
height: 50px;
cursor: pointer;
}
button.icon:hover {
background-color: #8e44ad;
}
input[type="text"] {
border: 0 none;
background-color: #ffffff;
height: 50px;
width: 350px;
font: 25px sans-serif;
padding: 0 0 0 5px;
}
form#gameSearch {
padding: 50px 0;
margin: 0 auto;
width: 430px;
}
What it looks like :
In Chrome
In FireFox

Answer 1

Add vertical-align: top; to the input field:
body {
background: #ddd;
}
button.icon {
box-sizing: border-box;
margin-left: -5px;
background-color: #9b59b6;
border: 0 none;
color: white;
font-size: 25px;
width: 75px;
height: 50px;
cursor: pointer;
}
button.icon:hover {
background-color: #8e44ad;
}
input[type="text"] {
box-sizing: border-box;
border: 0 none;
background-color: #ffffff;
height: 50px;
width: 350px;
font: 25px sans-serif;
padding: 0 0 0 5px;
vertical-align: top;
}
form#gameSearch {
padding: 50px 0;
margin: 0 auto;
width: 430px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/fontawesome.min.css" rel="stylesheet">
<form id="gameSearch" action="#">
<input type="text" name="game_search" maxlength="16" placeholder="Search...">
<button class="icon"><i class="fa fa-search"></i></button>
</form>