IE7でinputタグのtextがはみ出る

解決済

質問者：narukami521
質問日時：2013/02/19 03:18
回答数：2件

いつもお世話になります。

以下のソースのように、テーブルのtdの中にinputタグのtextを、widthを100%にして配置しています。
IE7でこれを表示すると、はみ出るというか突き抜けるというか、、、
という状態になっています。

これがIE8以上からだと、box-sizingを使用すればうまくいくのですが、IE7以下ではこのCSSは使えません。
IE7において、tdの中にうまく収めるためには、どのようにすればよいのでしょうか。

---------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>テキスト</th>
<td style="width: 100px;">
<input type="text" style="width: 100%;" />
</td>
</tr>
</table>
</body>
</html>
---------------------------------------------

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/02/19 11:44

まず、HTMLをIEが標準モードで起動するように変更しましょう。

　⇒DOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )
　互換モードだと、IEはboxサイズがborder辺の内側になってしまいます。

　input要素は、行内要素です。
　⇒7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　この区別はとても重要です。行内要素にwidthは指定しても意味がありません。
「(widthプロパティ)は、ブロック要素と置換要素の内容領域の幅を指定する。( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )」

<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は必須属性です。それを利用してセレクタを書くと簡単です。