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

如何解决这个问题以在不同的浏览器中表现相似？

Answer 1

一些尝试的选项:

1. float 两个元素并移除负左边距。
2. 删除源代码中 2 个 ASP 标记之间的空格并删除负左边距。
3. 将显式 font-size 应用于父容器(可能会增加间隙宽度在所有浏览器中都相同的可能性)。