2 u011561717 u011561717 于 2013.08.07 08:48 提问

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

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
IE9 table显示问题,td出现错位的解决方法
IE9 table显示问题 IE9 大数据行table的显示会出现列错位 原因是IE9的BUG 在jsp中使用 table加载大数据量时,td会出现错位,在firfox 、ie8 、360浏览器 测试匀没出现问题,正常显示 , 却在ie9 下不能正常显示,只能依靠浏览器自带兼容性加载, 想了几种解决办: 1、强制改变内核:IE7或IE8
解决IE8下DIV+CSS错位实效问题
解决IE8下DIV+CSS错位实效问题
ie8下数据不显示,F12启动调试后正常
程序正常启动运行,界面数据显示不出来,按F12调试后立马正常,网上查原因: IE8 与IE9 的console对象只有在打开了bug窗口之后才会被创建。之后的版本才解决了这个问题。删除了concole好了
javascript IE8/IE9上打开弹出窗口时,地址栏和状态栏仍显示的解决办法
使用JavaScript在IE8/IE9上打开弹出窗口时,地址栏和状态栏仍显示的解决办法2个 经过调查,由于IE8/IE9的安全级别得到了提高. 弹出窗口在默认情况下是肯定会显示地址栏和状态栏的. 据调查,通过js也是没有办法控制这点的. 但是通过修改浏览器的设置是可以达到目的的. 1)将域名添加到IE的信任列表 2)修改高级属性     工具⇒Internet选项⇒安全⇒Inter
IE8 div嵌套div(或table)自动下移,设置高度导致css样式错位
高版本浏览器不会出现的奇怪冲突,由于项目引入了大量css文件和前端框架,根本不知道是什么引起了这个错位的问题,最后参考了博客http://blog.sina.com.cn/s/blog_4cb8dae20100un07.html 适应于我的完美解决方案(尽管我没有使用浮动,但clear:both确实能够解决这个未知的样式问题 ...
echarts 画的图表在ie9以下不能正常显示
参考:http://www.oschina.net/question/2304424_223572 问题描述: Echarts,IE8下,js报错。 是一个indexOf的错误。 在echarts的源文件中使用了.indexOf方法。 解决办法:一半ie8报错 其他浏览器正常 都是逗号的问题,把最后一个属性后边的逗号去掉即可。
ie8/9下数据不显示,F12启动调试后正常
程序正常启动运行,界面数据显示不出来,按F12调试后立马正常,网上查原因:IE8 与IE9 的console对象只有在打开了bug窗口之后才会被创建。之后的版本才解决了这个问题。删除了concole好了...
解决IE8,IE9 在onmouseover下闪烁,无法正常滚动的问题
根据http://blog.sina.com.cn/s/blog_6261f86901011mub.html 学习找到方法。问题: 在IE11兼容模式下的ie8,不会出现图层闪烁,无法下拉到底的问题。 在自带IE8、IE9浏览器下,会出现问题。 在去掉onmouseover时,不会出现问题。 问题现象: 旧代码:function showOrHideTarget(targetId, i
IE兼容模式下排版错乱问题解决
IE浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式:                   还有一种情况,在IE8下只有不使用兼容模式页面才能显示正常,但是如果设定为IE8的模式,在IE9中却会导致CSS3失效。看来,需要针对 IE8、IE9 分别 禁用兼容模式。怎么办
IE8下的VML显示问题解决方案
最近在维护一个使用VML画曲线的网站,在不同的IE下浏览效果不一样,特别是在IE8下,出现莫名其妙的样式显示问题: 1.曲线不可见!在IE9或IE7下,曲线正常绘制,但是在IE8下,不见坐标轴和曲线。 2.曲线位置偏移!在IE9或IE7下,曲线位置正常,但是在IE8下,曲线出现中断、偏移的情况。 3.曲线重叠!即在某一个水平线上,多条曲线(或其它VML对象)扎堆绘制或显示在一起。 本来对V