【IE6.0 Bug总结之六】宽度100%问题

【IE6.0 Bug总结之六】宽度100%问题

     本来自信的我一般不会去用IE6测试自己写的网页，但今天在整理自己的博客时，无意间用IETester测试了一下自己的博客，结果很是令我吃惊，很多页面在IE6上虽然没有太大的bug，但很多却变得很难看，于是就开始改各种bug了。其他一些字体啊，颜色啊都很好改，花了几分钟就搞定，但其中有一个问题很让我摸不着头脑，简单的说是IE6下宽度100%会出问题。下面我用代码和截图来模拟这个问题的场景：

 1 <div style=" float:left; width:140px; height:200px; background-color:#EBB9FB; padding:10px">我是左浮的div</div>
 2 <div style="background-color:#CCCCCC; border:#CC9933 solid 1px; margin-left:170px">
 3     <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
 4         <thead>
 5             <tr style="background-color:#00CCCC">
 6                 <td>姓名</td>
 7                 <td>年龄</td>
 8                 <td>大学</td>
 9                 <td>性别</td>
10             </tr>
11         </thead>
12         <tbody>
13             <tr>
14                 <td>大傻</td>
15                 <td>33</td>
16                 <td>浙江大学</td>
17                 <td>男</td>
18             </tr>
19             <tr>
20                 <td>二傻</td>
21                 <td>32</td>
22                 <td>中国计量学院</td>
23                 <td>男</td>
24             </tr>
25         </tbody>
26     </table>
27 </div>

正常的效果图应该是这样的：

 

但在IE6上表格上面却多出了很大一段空白：

 

解决办法有两个：

  1. 宽度不要设成100%，设成99%即可。
  2. 如果宽度一定要100%，则可在表格外面的div中加上样式 _height:1% 就可以解决问题。
posted @ 2012-11-09 10:08  stylering  阅读(237)  评论(0)  编辑  收藏  举报