Chrome和IE中不同的间隙宽度答案

【问题标题】：Different gap width in Chrome and IEChrome和IE中不同的间隙宽度
【发布时间】：2013-05-10 19:37:05
【问题描述】：

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

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

【问题讨论】：

一些尝试的选项： 1. 浮动两个元素并删除负左边距。 2、去掉源码中2个ASP标签之间的空格，去掉负左边距。 3. 将显式font-size 应用到父容器（可能会增加所有浏览器中间隙宽度相同的机会）。
@MattCoughlin 将font-size 应用于父容器解决了问题:)，添加您的评论作为答案我会接受它作为正确...非常感谢。

标签： html css internet-explorer google-chrome cross-browser

【解决方案1】：

几个可以尝试的选项：

浮动两个元素并删除负左边距。
去掉源代码中2个ASP标签之间的空格，去掉负左边距。
将显式 font-size 应用到父容器（可能会增加间隙宽度在所有浏览器中相同的可能性）。

【讨论】：