CSS-Firefox在文本字段的顶部添加一个额外的像素,如何将其删除？

我想在此页面中创建一个类似于搜索栏的按钮http://dl.dropbox.com/u/333492/search/form.html

如果您使用chrome,opera或safari加载该页面,则搜索栏看起来应该是应该的(在Mac上进行了测试).但是,如果使用firefox(在Mac上至少经过ff 3.5和3.6测试),您会看到在文本字段的顶部添加了一个额外的像素,因此,文本字段比按钮低了一个像素,看起来很丑.

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

有人对什么可能导致此行为有任何想法吗？或者,甚至更好的是,有人可以更改该页面上的CSS以便解决该问题吗？

最佳答案

我终于找到了一篇博客文章,解释了问题的原因并提出了部分解决问题的答案.感谢@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;

现在一切似乎都还好.