表格按鈕在Firefox中未對齊

Question

我正在使用一個按鈕旁邊的搜索欄。

按鈕是完全符合的搜索欄上Chrome的和歌劇院對準，但火狐按鈕的像素夫婦的上升。

我試圖玩填充和邊距，但它似乎並沒有工作。

這裏是我的代碼和它是什麼樣子的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; 
} 

它看起來像什麼：

在鉻

在火狐

Answer 1

添加vertical-align: top;輸入字段：

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>