ie6 常见bug解决之道

bug 1 解决div 无法遮挡 select 的问题

一现象：

在调整页面样式时，经常发现浮动层的div被select遮挡。效果如下：



二.原因

在IE中,select属于window类型控件，它会“挡住”所有非window类型控件

可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，

他们被渲染在客户区的绘画表面上，

而select是使用的标准windows控件，只是作为客户区的子控件放置而已，

它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，

比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。

三 . 利用iframe 解决遮挡问题

如：

<style>.T_iframe   
{   
    position: absolute;/*绝对定位保证iframe不会占用流布局空间*/   
    width: 100%;    /*100%保证可以覆盖整个div*/   
    height: 100%;   
    z-index:-1; /*-1保证iframe显示在div下方*/   
}   
.T_div   
{   
    position: absolute;   
    left:100px;   
    top:50px;   
    width: 300px;   
    height: 200px;   
    background : blue;     
    z-index:100;   
}   </style>
<div class="T_div">  
     <span>这里可以包含其他dom元素</span>  
     <iframe class="T_iframe"></iframe>  
</div>

这里利用的原理是：iframe可以挡住select等元素，将iframe设置为同div的大小一直，并通过z-index放置与div内容之下，这样iframe挡住了select，内容也可以看到了。

在实际的代码中，我使用的是：<iframe style="position:absolute; z-index:-1;" frameborder="0" src="about:blank"></iframe>，通过firefox查看，iframe默认就是div的大小

bug2

下面的例子在ie6运行，li之间有空隙

<style>
    ul li{border:1px solid red;height:20px;}
    ul li span{line-height:20px;}

</style>
<ul>
   <li><span xxxx</span></li>
   <li><span xxxx</span></li>
   <li><span xxxx</span></li>
   <li><span xxxx</span></li>
   <li><span xxxx</span></li>
   <li><span xxxx</span></li>
   <li><span xxxx</span></li>
   <li><span xxxx</span></li>
</ul>

解决办法：在li的style中加入：float:left;width:100%;就ok