実験:フォームオブジェクトのサイズ

<input type="text" size="..." style="width:...px;">

ブラウザ 大まかな規則性(デフォルト時) 文字拡大縮小時 スタイルシートで幅固定可能か
IE3.0 width=5*size+20 不変 ×
IE4.0 width=5*size+15 不変
IE5.0 width=5*size+15 不変
IE6.0 width=5*size+15 不変
NS4.x width=7*size+12 フォームサイズも変わる ×
NS6.0 width=8*size+15 フォームサイズも変わる(不安定)
NS7.0 width=5*size+12 フォームサイズも変わる
上のブラウザはWindows版です。

■size=10,20,30,40


■width=NS4での値に合わせて固定
→NS4で見ても幅がほぼ同じ

<textarea cols="..." rows="..." style="width:...px;">

ブラウザ 大まかな規則性(デフォルト時) 文字拡大縮小時 スタイルシートで幅固定可能か
IE3.0 width=5*cols / (非線形?) 不変 ×
IE4.0 width=7*cols+20 / height=14*rows+6 不変
IE5.0 width=7*cols+20 / height=14*rows+6 不変
IE6.0 width=7*cols+20 / height=14*rows+6 不変
NS4.x width=7*cols+22 / height=13*rows+30 (15:wrap=physical,hard時) フォームサイズも変わる ×
NS6.0 width=8*cols+23 / height=16*rows+30 フォームサイズも変わる(不安定)
NS7.0 width=8*cols+32 / height=16*rows+22 フォームサイズも変わる
具体的な計算式はwrapオプション(正確にはスクロールバーの有無) などによって変わります。 上記は基本的にデフォルト時のものです。

■cols=10,20,30,40 rows=1,2,3,4


■width,height=NS4での値に合わせて固定
→NS4で見ても幅がほぼ同じ
フォームには関係ないですがIE3.0では背景の定規画像が15pxだけずれるようです。 IE3.0で見て確認する時には注意して下さい。

このページでは「きぃなび」を使ってないので 前の項目に戻るには BackSpaceキーか ブラウザの「戻る」ボタンを使って下さい。
HTML,CSSバグ&回避法リスト 目次へ