关于IE6的select无法被div遮挡的解决方案

  大家都知道,IE6是一个怪物,div是无法遮挡select的。关于这个问题,网上的解决方案很多。这里,我是在我的工程中涉及到了,并且已经完美的解决了。
       
我的问题是:我有一个用div做的漂浮窗口,这个窗口可以拉伸、可以拖动,现在它拉伸或拖动时无法遮挡在同一页面中的select。
        没有办法,在网上看来看去,用的最多的方法是:1、出现div窗口时将select隐藏;2、div可以挡住iframe,iframe可以挡住select,所以用iframe来做div窗口的衬底。而这两种方法中,又以第二种方法最为普遍。但是现在,我的div是大小和位置都会变动的,如果使用js来让iframe跟着div运动变化的话,是可以很简单的实现的,这也是网上多数的处理方式,但是这样会产生一个问题,那就是:iframe的运动是在div运动之后由js来触发的,这样iframe的运动就慢于div,如果iframe的背景色和网页的背景色相差很大的话,能看出来iframe运动的延迟,这样很丑。
        我的解决方案:
<div id="a">
       <iframe id="b"></iframe>
       <div id="c"></div>
</div>
       这样,iframe b的长宽均设成100%,div c的长宽也均设成100%,把拖动和拉伸处理放在div a上。由于b、c都是a的子元素,
当a被拖动时,b、c当然会自动跟随;而 当a被拉伸时,b、c长宽100%会自动填满a。这里a、b、c我都用了position:absolute来定位,由于自身的顺序问题,div c肯定会盖在iframe b上面,至少IE和firefox是这样子的。现在,基本框架已经建立好了,我只需要把要显示到div窗口里面的内容显示到div c中就可以了。再次说明:div a是父元素,iframe b和div c是子元素,子元素的z-index层级肯定在父元素上面,而iframe b和div c由于先写的iframe b,后写的div c,所以,div c的层级又高于了iframe b,于是,div c就显示在了最高层,我们可以将需要显示的内容放到div c中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值