Css Firefox中的表单按钮未对齐

我正在做一个旁边有按钮的搜索栏

该按钮与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>

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

它看起来像什么：

含铬

在FireFox中

---

添加

垂直对齐：顶部到输入字段：


正文{
背景：ddd；
}
按钮图标{
框大小：边框框；
左边距：-5px；
背景色：#9b59b6；
边界：0无；
颜色：白色；
字体大小：25px；
宽度：75px；
高度：50px；
光标：指针；
}
按钮。图标：悬停{
背景色：#8e44ad；
}
输入[type=“text”]{
框大小：边框框；
边界：0无；
背景色：#ffffff；
高度：50px；
宽度：350px；
字体：25px无衬线；
填充：0 5px；
垂直对齐：顶部；
}
表单#游戏搜索{
填充：50px0；
保证金：0自动；
宽度：430px；
}
是否启用了框大小：边框框？是的，但没有更改：（我制作了一个代码笔，如果有帮助的话，可以尝试一下。