【IE問題】 幅を%指定した<input>タグや<textarea>タグの幅が内容量によって変化してしまう問題

IEで、幅をパーセント指定した<input>タグや<textarea>タグの幅が、内容量に引きずられて変化してしまう問題がある。IE6とIE7での発現を確認。確認してないけど、IE5.5とか、それ以前でも発現しそう。IE8では修正されているようだ。IE以外のモダンブラウザでは発現しない。

問題は、<input>タグ(type=text/passwordの場合)と<textarea>タグの幅をパーセント指定しており、かつ<table>タグの中に含まれている場合に起こる。

解決策は、次の何れかしかなさそうだ。

• ピクセル固定幅に変更する。
• <table>タグに入れ子にしない。
• または、思い切ってIE6,IE7を非対応にする。(推奨ｗ)

テストデータを作って、実際にIEでチェックしてみた。

IE6では、入力欄が内容量に合わせてみょーーーーーーんって伸びている。

IE8では意図した通りの表示に。修正されているようだ。

今回のテストデータは、ここからダウンロード。上記に示した以外にも、幾つかのパターンを試してみている。DOCTYPEはXHTML1.1。

と、同じ問題についてググってみると、いいサイトを発見したのでブックマーク！

• CSSバグリスト

IE6のバグリストをすごくよくまとめてくれている。今回の同じ問題（？）については、テキスト入力フォームの幅が文字入力時に変化する - CSSバグリストで紹介されている。