div蒙板半透明兼容ie6

来源:互联网 发布:陕西省家长网络学校 编辑:程序博客网 时间:2024/05/22 06:08
<!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><!--[if lte IE 6]><style type="text/css">html{    /*这个可以让IE6下滚动时无抖动*/    background: url(about:black) no-repeat fixed; overflow:hidden;}</style><![endif]--></head><body><div class="mask opacity"></div><div class="main"><div class="pop">      蒙版上的内容    </div></div></body></html>

0 0
原创粉丝点击