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; 

現在一切似乎都沒問題。