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

Question

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

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

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

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

Answer 1

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

现在一切似乎都好起来了。