表单按钮未在Firefox中对齐

Question

我正在制作一个搜索栏，旁边有一个按钮。

该按钮与 Chrome 和 Opera 上的搜索栏完全对齐，但在 Firefox 上按钮上升了几个像素

我试图使用填充和边距但它似乎不起作用。

这是我的代码以及Chrome和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;
}

它看起来像什么：

在Chrome中

在FireFox中

Answer 1

将vertical-align: top;添加到输入字段：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;