html - 相对定位误差在 FF 和 Chrome 中

Question

我在这里遇到了一个非常奇怪的问题。我试图创建一个搜索栏，这就是它在 chrome 中的外观，这就是我想要的。

它在 Safari 中运行良好，这是所有涉及的 CSS 代码。

#input {
    height: 25px;
    padding-left: 5px;
    width: 70px;
}
#button {
    margin-left: -6px;
    height:27px;
    position: relative;
    top: -2px;
    padding-left: 5px;
}

但是在 FireFox 的情况下，按钮会向上移动一点，这使它看起来很糟糕。这是它在 FireFox 中的外观。

如果我删除该行，则 Firefox 中的此错误已修复，top: -2px;但随后在 Chrome 和 Safari 中出现类似问题。

我该如何解决 ？

Answer 1

你可以用 jQuery 修复

代码

$(document).ready(function(){
    if($.browser.mozilla){
        $("#button").css("top", "-2px")
    }
})

如果您尚未添加 jQuery，请添加此脚本

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>