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

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

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

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

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

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

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


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


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


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

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


プロフィール

コヤナギ トモヤ

まったりウェブ系コーダーしてます。PHP製静的CMS Pickles 2 を開発しています。

RSSフィード

  • このサイトは、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る