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在两个控件之间有不同的大小差距。

如何修复此问题以在不同的浏览器中表现相似？

Answer 1

尝试一些选项：

1. 浮动两个元素并删除负左边距。
2. 删除源代码中2个ASP标记之间的空格，并删除负左边距。
3. 将明确的font-size应用于父容器（可能会增加所有浏览器中间隙宽度相同的几率）。