首页 > web前端开发 > css > 解决IE6下position:fixed不兼容的问题
2015
04-07

解决IE6下position:fixed不兼容的问题

点击一个弹窗,全屏出现灰色半透明背景。如果要实现这样的效果,我们一般会顶一个全屏的div,给上不透明,再加上position:fixed。
比如:

.grey-box {
    display: none;
    position: fixed;
    z-index: 9998;
    width: 100%;
    height: 100%;
    background: #000;
    opacity:0.4;
    filter:Alpha(opacity=0.4);
    -moz-opacity:0.4;
}

在点击弹窗时,让div显示。
但是在IE6下是不兼容position:fixed的。于是找了下解决办法。

.grey-box {
    display: none;
    position: fixed;
    z-index: 9998;
    width: 100%;
    height: 100%;
    background: #000;
    opacity:0.4;
    filter:Alpha(opacity=0.4);
    -moz-opacity:0.4;
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
    _right: 0;
 
}

这样做解决了不兼容的问题,但是IE6下opacity又不兼容了。于是换了种写法:

.grey-box {
    display: none;
    position: fixed;
    z-index: 9998;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
    _right: 0;
 
}

以上就可以完美兼容啦。

最后编辑日期:
作者:uuling
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。