                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /弹出层效果

在IE下点击登录后弹出的登入框显示异常，请问有谁知道什么情况吗

//html部分

<!doctype html>

<html>

<head>

</head>

<body>

<h1>绚丽的照片墙</h1>

</div>

</body>

</html>

//样式部分
*{
	margin:0;
	padding:0;}
body{
	background:url(images/bg.jpg) no-repeat;
	min-width:1420px;}
h1{
	font-size:40px;
	color:#2FDF33;
	text-align:center;
	margin-top:2%;}
.container{
	width:90%;
	height:80%;
	margin:10% auto;
	position:relative;}
img{
	width:25%;
	position:absolute;
	transition:1s;
	padding:10px 10px 15px;
	border:1px solid #F0ECEC;
	background-color:#fff;
	z-index:1;}
.img01{
	transform:rotate(-15deg);}
.img02{
	left:18%;
	transform:rotate(5deg);}
.img03{
	left:36%;
	transform:rotate(45deg);}
.img04{
	left:54%;
	transform:rotate(15deg);}
.img05{
	right:0;
	transform:rotate(30deg);}
.img06{
    top:300px;
	transform:rotate(15deg);}
.img07{
    top:300px;
	left:18%;
	transform:rotate(-15deg);}
.img08{
    top:300px;
	left:36%;
	transform:rotate(15deg);}
.img09{
    top:300px;
	left:54%;
	transform:rotate(-15deg);}	
.img10{
    top:300px;
	right:0;
	transform:rotate(-15deg);}
img:hover{
	transform:rotate(0);
	transform:scale(2);
	box-shadow:3px 3px 15px #F8F8F8;
	z-index:2;}

#btn{
	position:fixed;
	top:50px;
	right:50px;
	font-family:'微软雅黑';  
	width:100px;
	height:40px;
	background:#c9394a;
	font-size:16px;	
	color:#fff;
	cursor:pointer;}
#close{ 
    background:url(images/close.jpg) no-repeat; 
	width:30px; 
	height:30px; 
	cursor:pointer; 
	position:absolute; 
	right:5px; 
	top:15px; 
	text-indent:-999em;
	}
#mask{ 
	background-color:#ccc;
	opacity:0.75;
	filter: alpha(opacity=75); 
	position:absolute; 
	left:0;
	top:0;
	z-index:1000;
	}
#login{ 
	position:fixed;
	z-index:1001;
	}
.loginCon{ 
	position:relative; 
	width:670px;
	height:380px;
	background:url(images/login.jpg) #2A2C2E center center no-repeat;
	}
//Js部分
function openNew(){
    //获取页面高度和宽度
	var sHeight=document.documentElement.scrollHeight;
    var sWidth=document.documentElement.scrollWidth;
	//获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
    var wWidth=document.documentElement.clientWidth;
	
	//创建一个遮罩层，设置ID为mask
    var oMask=document.createElement("div");//创建节点
    oMask.id="mask";
    document.body.appendChild(oMask);//插入节点    
	oMask.style.width=sWidth+"px";  //设置遮罩层的宽度和高度，使页面被完全遮罩。
    oMask.style.height=sHeight+"px";

	//创建一个登入框，设置ID为login
    var oLogin=document.createElement("div");
    oLogin.id="login";
    oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";//添加内容
    document.body.appendChild(oLogin);
	var dHeight=oLogin.offsetHeight;//获取登入框高度
    var dWidth=oLogin.offsetWidth;
	oLogin.style.left=(wWidth-dWidth)/2+"px";  
    oLogin.style.top=(wHeight-dHeight)/2+"px";//使登入框属于窗口中央
    //点击关闭按钮
	var oClose=document.getElementById("close");
    var oMask=document.getElementById("mask");
    oMask.onclick=oClose.onclick=function()
    {
    document.body.removeChild(oLogin);//删除节点
	document.body.removeChild(oMask);
    }	
}		
					
//加载后，点击登录按钮后，弹出遮罩和登录框  
   window.onload=function()
   {
       var oBtn=document.getElementById("btn");
       oBtn.onclick=function()
       {
          openNew();  
       }
   }