たまに忘れてFirebugで調査して「あーそうだった！ これだよ！ クソが！ 俺か！」みたいな。これはFirefoxのフォーム系の置換要素に設定してあるデフォルト・スタイルで、入力ボックスとボタンの高さを揃えるのが面倒くさい原因のひとつ(もちろんこれだけではない)。これはかなり昔からあるけど「置換要素がline-heightプロパティーで高さ変わるわけねーだろクソが」という理由によりWon't Fixなので、死ぬまで付き合うことになりそう。
!importantなため制作者スタイルからはどうあがいても上書きするのは無理なので、他のブラウザー向けにline-height: normalを設定してやるのがまず必要。その上で入力ボックスとボタンのbox-sizingプロパティーが違うことに気をつけ、高さを指定する。
input[type="text"] {
height: 1.75em;
line-height: normal;
box-sizing: border-box;
}
input[type="submit"] {
height: 1.75em;
line-height: normal;
}heightプロパティーだけではテキストが中央揃えにならないんじゃないかと思いがちだが、appearanceプロパティーの効果(多分)によりちゃんと中央揃えになるので特に気にする必要はない(どうせline-heightプロパティーを使えないので揃わなかったらどうしようもないけど)。box-sizingプロパティーにはFirefox向け(Firefox 14でもまだ外れていない)にプリフィックスが必要になることには注意。
box-sizingプロパティーを揃えない場合は、paddingプロパティーで調節するという手もあるが、その場合は入力ボックスやボタンの高さがブラウザーに依存することになる(line-height: normalがブラウザーによって違うので)。またline-heightプロパティーはnormalの場合、その値はブラウザーだけでなくfont-familyプロパティーにも影響を受けるので、paddingプロパティーで高さを揃える場合はfont-familyプロパティーも揃える必要が出てくる。
最後に-moz-focus-inner擬似要素(擬似クラスではない気がする)の存在も頭に入れる必要がある。この擬似クラスについてはドキュメントがないので正確なことはわからないんだけど、borderとpaddingプロパティーがデフォルトで指定されており、これが高さと位置ずれの原因になったりする。なのでnormalize.cssからコードを拝借してリセットしてやると良い。
これ以外にもappearanceプロパティーがウボァとか色々あって、フォームは魔窟のままなくせに機能追加だけはどしどしされてて大変。デザインが許すならスタイル無指定で……といきたいところ。検索フォームとかはそろそろボタンなしでtype="search"にすれば良い感じな気はするので、そういうところでは積極的にフォーム部品を少なくしていくとかもまぁアリなのかも。そういうのが許されない時は上記のことを忘れずに気長に頑張りましょう。