- ベストアンサー
IE7でinputタグのtextがはみ出る
- IE7で配置したinputタグのtextがはみ出る問題について
- IE7以下のブラウザでinputタグのtextが表示されない
- IE7において、tdの中にうまく収める方法はあるか
- narukami521
- お礼率8% (1/12)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まず、HTMLをIEが標準モードで起動するように変更しましょう。 ⇒DOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a ) 互換モードだと、IEはboxサイズがborder辺の内側になってしまいます。 input要素は、行内要素です。 ⇒7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 ) この区別はとても重要です。行内要素にwidthは指定しても意味がありません。 「(widthプロパティ)は、ブロック要素と置換要素の内容領域の幅を指定する。( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#the-width-property )」 <table border="1" summary="form"> <thead> <tr> </tr> </thead> <tbody> <tr> <th abbr="name">お名前</th> <td class="name text"> <input type="text" value="" tabindex="2" size="20"> </td> ・・・ table[summary="form"] td{display:relative;} table[summary="form"] td.name input{display:block;width:auto;margin:0;} ポイント 1)行内要素inputをblockにします。これで、直近のstatic以外の親コンテナブロックのサイズを参照できます。 2)親コンテナブロックのtdをstaticからrelativeに変更します。 携帯電話やスタイルシートを利用できないブラウザのため（後方互換）に、input要素にサイズを指定しておきましょう。 table要素のsummaryは必須属性です。それを利用してセレクタを書くと簡単です。
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
<input type="text" style="width: 100px;"> これでどうですかね、IE7 で確認できないもので。
