html - Chrome と Firefox で入力フィールドの表示が異なる

Question

Chrome でテストしましたが、正常に表示されますが、Firefox では入力ボックスが予想よりも大きくなります。

マークアップは次のとおりです。

<div class="form-wrapper">           
    <input type="search" name="Ofsearch"
            placeholder="Search here..." value=""/> 
    <button id="searchButton" type="submit">
        Search
    </button>
</div>

スタイルは次のとおりです。

.form-wrapper {
     height: 80px;
     clear: both;
}

.form-wrapper input {
     border-radius: 10px;
     border: 5px solid #E5E4E2;
     margin: 2px;
     height: 40px;
     vertical-align: middle;
     padding: 20px;
     margin-top: 15px;
     width: 85%;
}

.form-wrapper button {
     overflow: visible;
     position: absolute;
     float: right;
     border: 0;
     padding: 0;
     height: 40px;
     width: 110px;
     border-radius: 0 3px 3px 0;
     margin: 20px -118px;
}

これはfiddleの例です。

例からわかるように、Chrome と Firefox では、異なるサイズで表示されます。

この問題を確認したところ、padding:20pxin.form-wrapper input{ }がこの問題の原因であることがわかりました。ただ、削除するとFirefoxは問題なく表示されますが、Chromeでは入力エリアが狭くなってしまいます。不思議に思うのは、両方のブラウザで同じように表示する方法です。