js动态生成的div在ie9下显示正常而在ie8下显示错位

Question

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及其以下版本显示均有错位或不显示。请问该如何解决，谢谢！

Answer 1

看起来你的代码是在动态创建一个登录层div和一个遮蔽层div，并对它们的样式进行了设置。在IE8中，错位的可能原因可能是浏览器的兼容性问题。

---

IE8可能不支持一些新的CSS属性，如"filter"属性。在这种情况下，您可以尝试使用"-ms-filter"来替换"filter"，即：

new_page.style.filter="alpha(opacity=70)";

变成：

new_page.style.msFilter="progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

另外，你可以在divClientWidth/divClientHeight 这里使用 offsetWidth 和 offsetHeight来代替 clientWidth 和 clientHeight，它们可以兼容更多的浏览器。

---

另外，在IE8 中 document.body.scrollTop 和 document.body.scrollLeft 可能是undefined，所以你需要使用 document.documentElement.scrollTop 或 document.documentElement.scrollLeft来代替。

---

通过使用这些方法，你可以尝试解决在IE8中的错位问题。