最近在修改项目的一个需求变更时，无意间发现了以前的一个问题，

这里拿出来讨论，可能在其他项目中没有碰到这样的需求或者无意中规避了这个问题

也或许已经有html&CSS高手把问题解决，都请来分享一下经验：

问题描述如下

 

因为客户不太懂技术，把上述td的宽度设置了百分比，然后为了好看又把里面的文本框也设置了width:100%，想让他自适应

更改之后变成这样

1  2      3          4      5      6         
     
       7             
         8                 
 9                 
12                 
13                 
16             
17         
      
       
        
th1
        
10                     11                 
        
th2
        
14                     15                 
       
      
     
18         
     
      19             
        20                 
21                 
24                 25             
26             
        27                 
28                 
31                 32             
33             
        34                 
35                 
38                 39             
40             
        41                 
42                 
45                 46             
47             
        48                 
49                 
52                 53             
54         
      
       
        
th1
        
22                     23                 
       
       
        
th1
        
29                     30                 
       
       
        
th1
        
36                     37                 
       
       
        
th1
        
43                     44                 
       
       
        
th1
        
50                     51                 
       
      
     
55     56 

 

因为是老代码，这个画面恶心的地方首先是第一行和下面的各行不在一个table里，

图中的这个文本框对应的数据库表对应的字段是一个100位英文内容，如果满位输出的话，画面变成了这样。。。

1  2      3          4      5      6         
     
       7             
         8                 
 9                 
12                 
13                 
16             
17         
      
       
        
th1
        
10                     11                 
        
th2
        
14                     15                 
       
      
     
18         
     
      19             
        20                 
21                 
24                 25             
26             
        27                 
28                 
31                 32             
33             
        34                 
35                 
38                 39             
40             
        41                 
42                 
45                 46             
47             
        48                 
49                 
52                 53             
54         
      
       
        
th1
        
22                     23                 
       
       
        
th1
        
29                     30                 
       
       
        
th1
        
36                     37                 
       
       
        
th1
        
43                     44                 
       
       
        
th1
        
50                     51                 
       
      
     
55     56 

 

目测，这个文本框因为有一个maxlength=100,的设置，ie试图在允许的范围下，把内容全部显示，但是这样的话，画面就乱了，

测试环境是：IE 9，IE 8下也存在该问题，在chrome下完美解析，如下图：

所以据此推测是IE在解析INPUT上和chrome内核不太一致，但是现在开发是在IE8上进行，除了设置固定width和使用Js动态加载，有没有别的办法来兼容解决问题。。。

注：style=“table-layout:fixed”我用过了，但是这个办法有点狠，不太适合