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

Question

我想创建一个类似本页中的搜索栏 http://dl.dropbox.com/u/333492/search/form.html

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

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

有人知道可能导致此行为的原因吗？或者，更好的是，有人可以更改该页面上的 CSS 以便解决问题吗？

Answer 1

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

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;

现在一切似乎都正常了。