我做了一个搜索栏旁边有个按钮。
在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中