IEで、高さを揃えた入力フォームとボタンの横位置がずれる時の対処法

フォームのパーツの高さを揃えたりするのは、なかなかうまくいかない。CSSで頑張ってやってみるものの、ブラウザ間の違いできれいにならなかったり。 なんとかこうとか揃えたものの、IEさんがまた暴れてる…

テキストボックスとボタンの高さと横位置をぴったりに揃えようとした時に一番ハマったのが、IE（当方で確認したのはIE10）だけ縦にずれてしまう件。

そのうえ、テキストボックスをクリックしfocus状態にすると、ピコンと動き、横位置がぴったりに揃う現象。focusを解除すると、またピコンとずれる。とってもウザい。

IEでボタンが動いてずれる現象の対処法

理屈は分かりませんが、該当する箇所のテキストボックスに、font-family: 'MS PGothic';を適用すると解決します。

// CSS
[type=text] {
  font-family: 'MS PGothic';
}

このピコン現象を再現するための正確な条件は分かりませんが、<code>[type=text]</code>と<code>[type=submit]</code> に対して <code>height</code> やら <code>padding</code> やらを使ってて、全体の <code>font-family</code>の設定に <code>’MS PGothic'</code> を含んでいないとか、そのへんが関係するのでしょうか。

分かる方いましたらご教示ください。