Firefox добавляет дополнительный пиксель поверх текстового поля, как его удалить?

Question

Я хочу создать панель поиска, похожую на эту на этой странице http://dl.dropbox.com/u/333492/search/form.html

Если вы загрузите эту страницу с помощью Chrome, Opera или Safari, панель поиска будет выглядеть так, как и должна (проверено на Mac).Тем не менее, если вы используете Firefox (протестирован по крайней мере с ff 3.5 и 3.6 на Mac), вы увидите, что один дополнительный пиксель добавляется поверх текстового поля, и, таким образом, текстовое поле на один пиксель ниже, чем кнопка, котораявыглядит ужасно.

Я пытался удалить все возможные границы и отступы, но проблема не устранена.Я также заметил, что это не происходит, когда кнопка поиска отсутствует.

Есть ли у кого-нибудь идеи о том, что может быть причиной такого поведения?Или, что еще лучше, кто-то может изменить 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;

Теперь все вроде бы нормально.