浏览器之间的不一致问题，困扰我很长时间

Question

首先是截图

如你所见，虽然我明确地描述了高度，填充顶部等，但浏览器之间总是有一些差异，我怎样才能使它们相同？这个问题一直困扰着我，我从来没有找到原因，我甚至尝试删除reset.css我使用但仍然没有运气

粘贴相关的DOM和CSS以供参考

DOM：

<div id="menu">
        ...
        <form id="topsearch">
            <button name="submit" type="submit" tabindex="2"></button>
            <input id="s" name="s" type="text" value="SEARCH..." tabindex="1" />
        </form>
</d

CSS：

#topsearch {
    height:31px;width:205px;
    padding:8px 0 4px;
    background-color:#202020;
    float:right;
}

#topsearch #s {
    height: 17px;
    padding: 5px;
    vertical-align: middle;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
}

在Firebug中添加视图

Answer 1

尝试为所有元素设置margin: 0，看看是否还有同样的问题。浏览器通常会将自己的边距/填充应用于不同的元素。

Answer 2

您有几种可能性：

• JavaScript的： 您可以使用JavaScript设置不同的值，具体取决于浏览器，如下所示：http://rafael.adm.br/css_browser_selector/
• 条件HTML：使用特殊的<!--[if IE]>标记至少为Internet Explorer解决问题。
• 服务器端样式表切换：使用服务器端语言检测用户浏览器并相应地包含样式表。

Answer 3

我自己找到了一个解决方案，非常简单，只需将按钮向左浮动，现在所有浏览器的外观保持不变。

Answer 4

由于您尚未指定CSS的其余部分，因此我只能使用Chrome，Internet Explorer 8和Mozilla Firefox中的默认设置对其进行测试，但在使用position: absolute的浏览器中，这看起来应完全相同：

#topsearch {
    height: 43px;
    width: 205px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-color:#202020;
    position: relative;
    float: right;
}

#topsearch #s {
    height: 17px;
    width: 155px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    position: absolute;
    top: 12px;
    left: 30px;
    border: 0;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
    position: absolute;
    top: 10px;
}

应用您首选的样式，请务必相应更改top和left个位置。