最近在修改項目的一個需求變更時，無意間發現了以前的一個問題，
這里拿出來討論，可能在其他項目中沒有碰到這樣的需求或者無意中規避了這個問題
也或許已經有html&CSS高手把問題解決，都請來分享一下經驗：
問題描述如下
因為客戶不太懂技術，把上述td的寬度設置了百分比，然后為了好看又把里面的文本框也設置了width: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>
因為是老代碼，這個畫面惡心的地方首先是第一行和下面的各行不在一個table里，
圖中的這個文本框對應的數據庫表對應的字段是一個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="0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789"> 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內核不太一致，但是現在開發是在IE8上進行，除了設置固定width和使用Js動態加載，有沒有別的辦法來兼容解決問題。。。
注：style=“table-layout:fixed”我用過了，但是這個辦法有點狠，不太適合