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