Firefox40.0.2のアップデートでテキスト入力欄がはみ出す場合の解決法

Firefoxを40.0.2にバージョンアップしたところ、このブログや多くのサイトでテキスト入力欄の幅が広がり、はみ出すようになってしまいました。
こちらの記事によるとテキスト入力欄の取得フォントの仕様変更により、inputをsize指定しているサイトでレイアウト崩れを起こすとのこと。
要するにinputを幅の小さいフォントに指定してやればとりあえず解決します。

【Firefox側での解決方法】
  1. Windowsのメモ帳を開き、下記をコピペします。
    input,select {
    font-family: "MS UI Gothic";
    }
    (font-familyはMeiryo UIでもいけます。お好みで)
    これをuserContent.cssと名前を付けて保存します。

  2. Firefoxの右上メニューボタン(≡マーク)を押し、「ヘルプメニュー(?マーク)」→「トラブルシューティング情報」を開きます。
    新しく開いたタブの「アプリケーション基本情報」にある「プロファイルフォルダ」横、「フォルダを開く」ボタンを押します。

  3. ウィンドウが開くので「新しいフォルダー」ボタンを押してchromeという名前のフォルダを作成、その中に先ほどのuserContent.cssを入れます。


Firefoxを再起動するとレイアウト崩れが直るはずです。


【サイト側での解決方法】
上記userContent.cssと同じ内容をCSSに追記すれば良いかと思います(Firefoxハック)。
font-familyではなくwidthかmax-widthが推奨されているようですが、メイリオだと高さもあるのでレイアウト崩れが直らない場合があります。
@-moz-document url-prefix() {
input,select {
font-family: "Yu Gothic UI", "Meiryo UI";
}
}
ようやく最近IEのバグに悩まされなくなってきたのに、余計な作業増えました!

【関連記事】
Firefox40.0.2のテキスト入力欄はみ出し問題は40.0.3で修正された模様

この記事へのコメント