html代码如下:
js代码如下:
function logIn(){
var new_page=document.createElement("div");//创建遮蔽层div
new_page.style.position="absolute";
new_page.style.top=0;
new_page.style.left=0;
new_page.style.width=document.body.scrollWidth+"px";
new_page.style.height=document.body.scrollHeight+"px";
new_page.style.backgroundColor="#efefef";
new_page.style.filter="alpha(opacity=70)";
new_page.id="shielddiv";//遮蔽层div
var logInDiv=document.createElement("div");//创建登录层div
logInDiv.style.border="1px solid #999999";
logInDiv.style.width="400px";
logInDiv.style.height="250px";
logInDiv.style.position="absolute";
var divClientWidth=(document.body.clientWidth-400)/2+document.body.scrollLeft;
var divClientHeight=(document.body.clientHeight-250)/2+document.body.scrollTop;
logInDiv.style.left=divClientWidth+"px";
logInDiv.style.top=divClientHeight+"px";
logInDiv.style.backgroundColor="#ffffff";
logInDiv.id="logInpagediv";//登录层div
var logInDivTitle=document.createElement("div");//登录层div标题栏
logInDivTitle.style.width="400px";
logInDivTitle.style.height="36px";
logInDivTitle.style.backgroundColor="#dbdbdb";
logInDivTitle.style.id="titlediv"
var hh=document.createElement('h2');//登录层div标题栏下左部
hh.style.marginTop="2px";
hh.style.marginLeft="15px";
hh.style.cssFloat="left";
hh.textContent="登录";
hh.style.fontWeight="normal";
hh.style.fontSize="18px";
var inputDiv1=document.createElement('div');//登录层div帐号输入
inputDiv1.style.position="absolute";
inputDiv1.style.top="85px";
inputDiv1.style.left="44px";
inputDiv1.style.width="300px";
inputDiv1.style.height="32px";
inputDiv1.style.lineHeight="32px";
inputDiv1.style.color="#000000";
inputDiv1.style.fontSize="16px";
var span2=document.createElement('span');//登录层div帐号输入
span2.style.cssFloat="left";
span2.textContent="帐号";
var input1=document.createElement('input');//创建input框
input1.style.width="250px";
input1.style.height="32px";
input1.style.border="1px solid #999999";
input1.style.cssFloat="right";
input1.id="accountsInput";
input1.tabIndex="1";
var inputDiv2=document.createElement('div');//登录层div密码输入
inputDiv2.style.position="absolute";
inputDiv2.style.top="130px";
inputDiv2.style.left="44px";
inputDiv2.style.width="300px";
inputDiv2.style.height="32px";
inputDiv2.style.lineHeight="32px";
inputDiv2.style.color="#000000";
inputDiv2.style.fontSize="16px";
var span3=document.createElement('span');//登录层div密码输入
span3.style.cssFloat="left";
span3.textContent="密码";
var input2=document.createElement('input');//创建密码input框
input2.setAttribute("type","password");
input2.style.width="250px";
input2.style.height="32px";
input2.style.border="1px solid #999999";
input2.style.cssFloat="right";
input2.id="passwordInput";
input2.tabIndex="2";
var buttonDiv=document.createElement('div'); //登录层div下button div
buttonDiv.style.position="absolute";
buttonDiv.style.top="190px";
buttonDiv.style.left="80px";
buttonDiv.style.width="260px";
buttonDiv.style.height="32px";
buttonDiv.style.display="inline";
var confirmBut=document.createElement('input');//登录层div下确定键
confirmBut.type="button";
confirmBut.style.width="100px";
confirmBut.style.height="32px";
confirmBut.style.lineHeight="32px";
confirmBut.style.color="#000000";
confirmBut.style.fontSize="16px";
confirmBut.style.backgroundColor="#efefef";
confirmBut.value="confirm";
confirmBut.style.cssFloat="left";
confirmBut.id="confirButid";
confirmBut.tabIndex="3";
var cancleBut=document.createElement('input');//登录层div取消键
cancleBut.type="button";
cancleBut.style.width="100px";
cancleBut.style.height="32px";
cancleBut.style.lineHeight="32px";
cancleBut.style.color="#000000";
cancleBut.style.fontSize="16px";
cancleBut.style.backgroundColor="#efefef";
cancleBut.value="cancle";
cancleBut.style.cssFloat="right";
cancleBut.tabIndex="4";
buttonDiv.appendChild(cancleBut); //生成取消键
buttonDiv.appendChild(confirmBut); //生成确定键
logInDiv.appendChild(buttonDiv); //生成确定键div
inputDiv2.appendChild(span3); //生成密码输入
inputDiv2.appendChild(input2);
logInDiv.appendChild(inputDiv2);
inputDiv1.appendChild(span2); //生成帐号输入
inputDiv1.appendChild(input1);
logInDiv.appendChild(inputDiv1); //生成帐号输入div
logInDivTitle.appendChild(hh);
logInDiv.appendChild(logInDivTitle); //生成标题栏
new_page.appendChild(logInDiv); //生成登录div
document.body.appendChild(new_page); //生成遮蔽层div
}
在ie9显示正常,而在ie8及其以下版本显示均有错位或不显示。请问该如何解决,谢谢!