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

在火狐中

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>