まずは以下のスクリーンショットをご覧いただこう。
よくある問い合わせフォームのtextareaなのだが、IE（バージョンは11）だとなぜか何も入力していないのに豆腐文字が出現する問題に遭遇した。
以前、IEで改行が豆腐に化ける問題について解説したが、それとはまた別の問題だ。
今回はこの原因と解決法について解説していく。
IEの開発者ツールで原因を探っていく
まず、textarea本体のスタイルを確認する。
今回の例ではbootstrapを使っていたので、以下のCSSが当たっていた。
いくつかスタイルを取ったりつけたり試していく中で、font-familyのスタイルを外してみたところ、先ほどの豆腐問題は解決した。
font-family: inheritは、親元のCSSを継承するスタイルなのだが、bodyに対するCSSで以下の指定がされていた。
font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;
実はこの指定が原因で問題を起こしていたのだ。
解決法
どうやらIEの場合、ヒラギノを優先フォントとして指定すると今回のバグが発生するようで、CSSを以下のように修正することで解決した。
font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro",sans-serif;
IEは奥が深い。