html - Chrome と IE でギャップ幅が異なる

Question

これは私のHTMLとCSSコードです

HTML

<asp:TextBox ID="txtSearchMain" runat="server" CssClass="text-box" />
<asp:ImageButton ID="imbSearchMain" runat="server" ImageUrl="~/Resources/Images/icon-search.png" CssClass="custom-text-box-img" />

CSS

.text-box {
    border: 1px solid #CFCFCF;
    padding: 4px;
    margin: 0;
    height: 16px;
}

.custom-text-box-img {
    border: 1px solid #CFCFCF;
    height: 18px;
    padding: 3px;
    vertical-align: bottom;
    margin-left: -3px;
    background-color: white;
}

このコードの出力は、Chrome と IE で異なる動作をします

Chrome の出力は期待どおりですが、IE では 2 つのコントロール間のサイズのギャップが異なります。

これを修正して、異なるブラウザで同様に動作するようにするにはどうすればよいですか?