div蒙板半透明兼容ie6

太过爱你忘了你带给我的痛 2022-08-10 14:41 184阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>蒙版兼容ie6</title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    li{ list-style:none;}
    .mask{height:100%; width:100%; position:fixed; _position:absolute; left:0; top:0;  z-index:100; } 
    * html .mask { /* ie6 hack */
         position: absolute;
         height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    }
    .opacity{ opacity:0.6; filter: alpha(opacity=60); background-color:#000; }
    .main{ height:1000px; position:relative; z-index:101;}
    .pop{ 
    	position:fixed; 
    	left:50%; top:50%;  
        margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */  
        margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/  
        margin-top:0px;  
        position:fixed!important;/* FF IE7*/  
        position:absolute;/*IE6*/  
        _top:expression(eval(document.compatMode &&  
                    document.compatMode=='CSS1Compat') ?  
                    documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/  
                    document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/   width:300px; text-align:center; padding:20px; background:#fff; z-index:102;}
    </style>
    
    </head>
    
    <body>
    <div class="mask opacity"></div>
    <div class="main">
    	<div class="pop">  
        	蒙版上的内容
        </div>
    </div>
    </body>
    </html>