Firefox3でメイリオを指定するとinputのsizeが倍増する

【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！

Firefox3でメイリオを指定するとinputのsizeが倍増する

Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。

検索窓は

<input id="search" name="search" size="20" />

といたってシンプルなコード。

フォントの指定も

font-family:sans-serif;

と非常にシンプル。

font-family:"ＭＳ Ｐゴシック";

などに変更すると元の長さに戻ります。

font-family:"メイリオ";

などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます)

解決策としては

input にかかっているfont-familyを"ＭＳ Ｐゴシック"に変更するか、widthで明確に横幅を指定するかのようです。

というわけで、widthで固定しました。

#search{
	width:150px;
}

スポンサードリンク

«[Re:Creator's Party Kansai]クリックの操作 - jQueryによるJavaScript入門 | メイン | [Re:Creator's Party Kansai]第3回 CSSとクリックの応用 - jQueryによるJavaScript入門»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/516
トラックバック内容
» [Firefox3] textareaよ、おまえもか from ほたるさんさん日記MR2
Firefox3でメイリオを指定するとinputのsizeが倍増する[to-R] ソース中でメイリオを指定したりはしてないんだけど、ブラウザ（こ...
トラックバック時刻: 2008年7月 3日 13:15
コメント

思いの外、Firefox3で見てるとおかしなところが出てくるんですよねー。
なかなかえぐい。

投稿者:hiloki | 2008年7月 1日 14:49

Firefox3は速さが取り柄ですから！

投稿者:西畑一馬 | 2008年7月 1日 15:52

input だけでなく、textarea も同様のようです。
昨夜或るところのレンタル・メールフォームを見ていました。
textarea だけがビヨ～ンと右に伸びていました。
恐らく input はサイズ指定がしてあったのでしょう。

斯く言う私は firefox 3 でのフォント指定をメイリオにしています。

投稿者:uttar | 2008年7月 1日 17:26
コメントを投稿


画像の中に見える文字を入力してください。