ホームページ >ウェブフロントエンド >htmlチュートリアル >テキストボックスの幅が100%に設定されます。コンテンツが多すぎると、tdの幅がinvalid_html/css_WEB-ITnoseになります。
テキストボックスの幅が100%に設定されます。コンテンツが多すぎると、tdの幅がinvalid_html/css_WEB-ITnoseになります。
- WBOYオリジナル
- 2016-06-24 11:28:331153ブラウズ
最近、プロジェクトの要件の変更を修正する際に、以前の問題を偶然発見しました
他のプロジェクトではそのような要件に遭遇しなかったか、誤ってこの問題を回避してしまった可能性があります
あるいは、かもしれません。問題を解決した HTML と CSS の専門家がいますので、ぜひ体験を共有してください:
問題は次のように説明されています
お客様はあまり技術的ではないため、上記の td の幅をパーセンテージに設定し、変更しました。見栄えを良くするために中のテキストボックスを幅: 100% に設定し、アダプティブにしたいと思います
変更後は次のようになります
うわー
古いコードなので、この画像の嫌な部分です。最初の行と次の行が同じテーブル内にないということです。
画像のテキスト ボックスに対応するデータベース テーブルに対応するフィールドは 100 桁の英語の内容であり、全桁が出力されると、画面が表示されます。このようになります。 。 。
1 <html> 2 <head> 3 4 </head> 5 <body> 6 <table style="background-color:green;width:100%"> 7 <tr> 8 <th style="width:20%;background-color:red">th1</th> 9 <td style="width:30%;background-color:yellow">10 <input type="text" style="width:100%" maxlength="100" value="">11 </td>12 <th style="width:30%;background-color:red">th2</th>13 <td style="width:20%;background-color:yellow">14 <input type="text" maxlength="100" style="width:100%" value="">15 </td>16 </tr>17 </table>18 <table style="background-color:white;width:100%">19 <tr>20 <th style="width:20%;background-color:red">th1</th>21 <td style="background-color:yellow">22 <input type="text" maxlength="100" style="width:100%" value="">23 </td>24 25 </tr>26 <tr>27 <th style="width:20%;background-color:red">th1</th>28 <td style="background-color:yellow">29 <input type="text" maxlength="100" style="width:100%" value="">30 </td>31 32 </tr>33 <tr>34 <th style="width:20%;background-color:red">th1</th>35 <td style="background-color:yellow">36 <input type="text" maxlength="20" style="width:100%" value="">37 </td>38 39 </tr>40 <tr>41 <th style="width:20%;background-color:red">th1</th>42 <td style="background-color:yellow">43 <input type="text" maxlength="20" style="width:100%" value="">44 </td>45 46 </tr>47 <tr>48 <th style="width:20%;background-color:red">th1</th>49 <td style="background-color:yellow">50 <input type="text" maxlength="20" style="width:100%" value="">51 </td>52 53 </tr>54 </table>55 </body>56 </html>
目視検査、このテキスト ボックスは maxlength=100 の設定があるため、IE は許容範囲内のすべてのコンテンツを表示しようとしますが、この場合、画面がめちゃくちゃになります
テスト環境は: IE 9 、この問題は IE 8 でも存在し、以下に示すように、Chrome では完全に解析されます:
したがって、IE は INPUT の解析において Chrome カーネルと一貫性がないと推測されますが、現在開発は行われています。固定幅とJsを使用した動的読み込みの設定を除いてIE8で実行しましたが、互換性のある方法で問題を解決する他の方法はありますか。 。 。
注: style="table-layout:fixed" を使用しましたが、この方法は少し乱暴で適切ではありません