テキストボックスの幅が100%に設定されます。コンテンツが多すぎると、tdの幅がinvalid_html/css

テキストボックスの幅が100%に設定されます。コンテンツが多すぎると、tdの幅がinvalid_html/css_WEB-ITnoseになります。

WBOY

リリース： 2016-06-24 11:28:33

オリジナル

1159 人が閲覧しました

最近、プロジェクトの要件の変更を修正する際に、以前の問題を偶然発見しました

他のプロジェクトではそのような要件に遭遇しなかったか、誤ってこの問題を回避してしまった可能性があります

あるいは、かもしれません。問題を解決した 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" を使用しましたが、この方法は少し乱暴で適切ではありません