1194055 – Size of <input> elements has changed in Firefox 40 を見て [メール投稿]

1194055 – Size of <input> elements has changed in Firefox 40
Brian Birtles (:birtles) 2015-08-12 21:47:43 PDT

We're seeing reports on twitter in Japan of layouts breaking in Firefox 40 due to the sizing of <input type="text"> and <textarea> elements.

One report suggests the default font might have changed.[1]

For the test URL the following difference is reported:


Jonathan Kew (:jfkthame) 2015-08-13 00:45:19 PDT

The fact that the default font for these elements changed is expected; we were using a deprecated API and getting an old default. I note that viewing the testcase from the URL in IE 11 on Win8.1 gives me a result that's closer to our "new" behavior than our "old".

In general, I'm seeing substantial differences between browsers/platforms with the testcase, illustrating the fact that relying on a specific default size of <input> elements is extremely fragile. Authors who want a specific size should be explicitly specifying it.

Is there some reason this is particularly problematic in Japan? (What was the old font being used, what is the new font, and -- aside from the effect on size -- is the new font better/worse than the old one? How does it compare to what IE uses?)

Masayuki Nakano (:masayuki) (Mozilla Japan) 2015-08-13 03:07:16 PDT

I think that the main problem is, the old Japanese UI font "MS UI Gothic" and new Japanese UI font "Meiryo UI" have very different size and glyph. A character size of Meiryo UI is too large. That must cause breaking a lot of web sites' layout.

Edge still uses "MS UI Gothic" for the default style of <input> according to the testcase. So, we should not use "true" system font on Win8 or later.

 英語なのでよくわからないが、"MS UI Gothic"から"Meiryo UI"に変わったように読める。それならば、スタイルシートのfont-familyプロパティで指定すれば、以前の状態と比較できるかもしれない。アップデート前のFirefoxが無いので、どの程度変わったか比較できずに困っていた。
<body style="background-color:silver;">
<input type="text" name="name" size="60"><span>指定なし</span><br />
<input type="text" size="60" style="font-family: 'MS ゴシック';"><span>MS ゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS Gothic';"><span>MS Gothic</span><br />
<input type="text" size="60" style="font-family: 'MS Pゴシック';"><span>MS Pゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS PGothic';"><span>MS PGothic</span><br />
<input type="text" size="60" style="font-family: 'MS UI Gothic';"><span>MS UI Gothic</span><br />
<input type="text" size="60" style="font-family: 'メイリオ';"><span>メイリオ</span><br />
<input type="text" size="60" style="font-family: 'Meiryo';"><span>Meiryo</span><br />
<input type="text" size="60" style="font-family: 'Meiryo UI';"><span>Meiryo UI</span><br />
<input type="text" size="60" style="font-family: 'serif';"><span>serif</span><br />
<input type="text" size="60" style="font-family: 'sans-serif';"><span>sans-serif</span><br />
<input type="text" size="60" style="font-family: 'monospace';"><span>monospace</span><br />


 "MS UI Gothic"から"Meiryo UI"ではなく、"MS Gothic"から"Meiryo"に変わったような気がする。--

 左は次のように width:500px; を追加しただけ。value= は入力する手間を省くため。
<input value="あいうえお…" type="text" size="60" style="width:500px;font-family: '~';">

 右は次のように width:500px; の他に font-size:16px; も追加した。
<input value="あいうえお…" type="text" size="60" style="font-size:16px;width:500px;font-family: '~';">

 どうやら、font-sizeを指定しておけば、font-family によって想定外の違いはないようだが、指定しておかないと、フォントサイズがどうなっているか不明になるようだ。
 style="width:500px;" などと幅を固定しなかった場合。やはり、font-size:16px; の有無で変わる。

nice!(0)  コメント(0)  トラックバック(0) 

nice! 0

コメント 0



トラックバック 0