悲催的IE6 七宗罪大吐槽（带解决方法）第二部分

三、position:fixed无效

今天在IE6上遇到一个bug，本来想做一个消息提示框，让他在页面右上角停留一段时间后消失，这段时间内提示框随着页面的下拉一直出现在浏览器可见区的顶部，于是我用到了css的一个属性position:fixed，但遗憾的是在IE6下这个属性不起作用，悲剧的IE6，于是便找解决方案，现把最佳的解决方案拿出来与大家分享，或许不久的将来你能用上。

、要实现的效果如下图：

这时弹出提示在浏览器最右上角可见区

这时浏览器向下滚动了一下，但要让弹出层保持在浏览器最右上角可见区

、兼容的解决方案代码如下：

css代码如下

.loading_tip {

position: fixed;

_position: absolute;

top: 10px;

right: 5px;

_bottom: auto;

_top: expression(eval(document.documentElement.scrollTop+10));

background-color: #F0F0F0;

padding: 5px;

border: #6FD65Csolid1px;

z-index: 9999999;

}

/** 防止在拖动过程中出现抖动现象 **/

*html {

background-image: url(about:blank);

background-attachment: fixed;

}

.content{

height:1500px;

}

html代码如下

<divclass="loading_tip">这是fixed的区域，休想让消失</div>

<divclass="content">这是好多内容的区域，我要往下拖动了，上面的fixed的区域想跟我一起下来吗？</div>

这下好了，终于能在IE6上实现fixed效果了

四、div无法遮盖select问题

今天来看看IE6下的这个bug，绝对定位的div无法遮盖select，本来是想做一个弹出的div来作提示框，可是到了IE6下，无意中发现页面上的一个select无法被弹出的div遮住，好像是select把div划破了一样，具体效果如下图所示。

这是正常的图，上面的div把下面的select遮住了

这是IE6下不正常的效果，上面div不能把下面的select遮住

那么如何解决这个bug呢，解决该bug的方法如下：

、将select放到iframe里面，div 无法覆盖select,但是iframe 可以覆盖select，而div可以覆盖iframe，所以解决办法就是用Z轴高度更高的Iframe元素，包裹或覆盖住下拉列表框控件，使其回到正常的Z轴高度上来，但每个select都加太烦了，不推荐

、在需要遮盖select的那个div放入一个空的iframe，这样就可以针对性的解决问题了，简单，值得推荐

种方法贴出css代码如下：

<style type="text/css">

#pop{

width: 300px;

height:100px;

padding:10px;

position:absolute;

top:0;

border:1pxsolidblue;

background-color:#6666CC;

filter:alpha(opacity=70);

opacity:0.6;

}

#sect{

width:400px;

margin-top:60px

}

#pop iframe{

display:none;

display:block;

position:absolute;

top:0;

left:0;

z-index:-1;

width:3000px;

height:3000px;

}

</style>

html代码如下：

<divid="pop">这个是绝对定位的div，看看它有没有把select遮住<!--[if lte IE 6.5]><iframe></iframe>

<![endif]--></div>

<selectid="sect">

<optionvalue="1">我是select，你能把我遮住吗</option>

<optionvalue="2">我是select，你能把我遮住吗</option>

</select>