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. 浮动两个元素并删除负左边距。
2. 删除源代码中 2 个 ASP 标记之间的空格并删除负左边距。
3. 将显式应用font-size到父容器（可能会增加间隙宽度在所有浏览器中相同的机会）。