Firefox在文本字段的顶部添加了一个额外的像素，如何删除它？

Question

我想在这个页面http://dl.dropbox.com/u/333492/search/form.html

创建一个像一个搜索栏，如果加载的页面，铬，歌剧或Safari浏览器，搜索栏看起来应该（在Mac上测试）。但是，如果您使用firefox（在Mac上至少使用ff 3.5和3.6进行测试），则会看到在文本字段顶部添加了一个额外像素，因此文本字段比按钮低一个像素，看起来很丑。

我试图删除所有可能的边框和填充，但问题仍然存在。我也注意到，当搜索按钮不存在时，它不会发生。

有人有什么想法可能会导致此行为？或者，甚至更好，有人可以改变该页面上的CSS，以便问题得到解决？

Answer 1

我终于找到了一篇博文，解释了问题的原因，并提出了一个部分解决问题的答案。感谢@anttisykari Twitter！

http://christophzillgens.com/en/articles/equal-height-input-and-button-elements-in-firefox-and-safari

因此正确答案是以下行添加到CSS：

input[type="submit"]::-moz-focus-inner {border:0;} /* ff specific stuff, yuck*/ 
input[type="submit"]:focus {background:#333;} /* change accordingly depending on your button bg color, this fixes the focus problem when using keyboard to move betweenform elements */ 

但是，IE8仍然打破了我的形式，所以我不得不把这些东西加到两个输入元素。

display: block; 
position: relative; 
float: left; 

现在一切似乎都没问题。