firefox 40.0以降でinput sizeが大きくなる原因と解決方法

2015年8月11日にfirefox 40.0がリリースされ、
一部のWEBサイトでinputサイズが大きくなる問題が発生しているようです。

発生条件は、inputタグにfont-familyを指定していない、またはCSSで縦横幅を指定していない場合。
原因は、inputタグのデフォルトフォント(font-family)が変更になった為で、こちらのフォント指定を元に戻すことで、
従来の表示にすることができましたので、その方法を紹介します。

但し、下記の解決方法は、暫定処置となります。
レイアウト崩れを根本的に解決される場合は、CSSにて縦横幅を指定されることをオススメします。

【全体にCSSを適用する場合】

input{
    font-family:MS UI Gothic;
}

【特定のtype属性のみ指定する場合】

input[type=text],
input[type=password]{
    font-family:MS UI Gothic;
}

【追記】
※CSS適用前の状態で、mac版firefox(40.0.2)にて確認したところ、大きな問題は起こっていないようですので、
今回はwindows環境でのみ大きな崩れが発生している可能性があります。
また、上記CSSを適用した場合、当然mac版firefoxやその他ブラウザでもフォント指定が変わる為、
クロスブラウザでのチェックを推奨します。

上記を踏まえて、現在は下記のコードを推奨します。

【影響範囲をfirefoxのみに限定(css hack)する場合】

@-moz-document url-prefix(){
    input,
    select,
    textarea{
        font-family:MS UI Gothic;
    }
}

※上記の情報は、全ての条件下で検証したものではありませんので、参考情報としてください。

【追記】2015_08_27

本日リリースされたver40.0.3で上記一連の不具合は解消されていることを確認しました。
(上述の対応は不要となりました。)


2015年8月15日