我正在制作一個搜索欄，旁邊有一個按鈕。

該按鈕與Chrome和Opera上的搜索欄完全一致，但在Firefox上，該按鈕上升了幾個像素。

我試著用填充和空白來玩，但它似乎不起作用。

以下是我的代碼以及它在Chrome和Firefox上的樣子:

HTML:

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

它看起來像什么:

鉻合金

在FireFox中

添加垂直對齊:頂部；到輸入字段:

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