<TEXTAREA> の縦サイズ

<TEXTAREA> で rows を指定しても IE と Firefox では見た目が違ってしまいます。

例えば次のように定義します。

<textarea rows="3" cols="20">
1.ABCDE
2.あいう
3.アイウ</textarea>

rows を 3 にしていますが、Firefox では 次の赤線で囲んだように 3 行分以外に スペースが空いてしまいます。

WRITE_0335_01

不思議に思っていたのですが、 どうやらこのスペースは、横スクロールバーのための予定地だったようです。 スタイルシートで横スクロールバーを出してみます。

textarea {
    overflow-x : scroll ;
}

次のようになります。

WRITE_0335_02

Firefox はこの状態で 3 行分の縦サイズになりました。 逆に IE の方は横スクロールバーの分 隠れてしまいました。

自動改行させる場合(デフォルト)は、横スクロールがなくても 横に長くなった分は、次の行に改行されるだけなので 横スクロールバーを“なし”に設定してみます。 (ついでに縦スクロールバーを“必須”にしてデザインを合わせます)

textarea {
    overflow-x : hidden ;
    overflow-y : scroll ;
}

次のようになりました。

WRITE_0335_03

IE と Firefox で同じ縦サイズになりました。

横に長くなっても折り返すだけなので問題ありません。

WRITE_0335_04

自動改行させない場合はこの方法は使えません。
wrap を off にしてみます。

<textarea rows="3" cols="20" wrap="off">
1.ABCDExxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2.あいう
3.アイウ</textarea>

WRITE_0335_05

横に長くなった分が隠れてしまうだけでなく IE 側にスペースができてしまいました。

Google サイト内検索

Amazonアソシエイト