动态生成的<li>在IE中不是方的?
JS生成的<li>,style设置的是HEIGHT和WIDTH都是10PX。在FF中没问题,在IE中高度变成两倍了?[code]
<!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=gb2312" />
<title>JS扫雷</title>
</head>
<body><div id="game" style="margin:auto; border:1px red solid;"></div>
</body>
</html>
<style type="text/css">
body{ margin:auto;}
#maindiv li{ list-style:none; background:url(2.gif); float:left; height:10px; width:10px;}
</style>
<script type="text/javascript">
function CLASS_SL(v,h,area)
{
if ((v<1)||(h<1))
{
alert('数据初始错误!请检查行和列!');
return false;
}
this.list=new Array(v,h);
this.dx=10;
this.v=v;
this.h=h;
this.area=area;
}
CLASS_SL.prototype.show=function()
{
maindiv=document.createElement("div");
maindiv.style.background='#CCCCCC';
maindiv.style.width=this.dx*this.v+'px';
maindiv.style.height=this.dx*this.h+'px';
maindiv.id='maindiv';
document.getElementById(this.area).appendChild(maindiv);
for(i=0;i<this.h;i++)
{
for(j=0;j<this.v;j++)
{
listdiv=document.createElement('li');
listdiv.id='list-'+i+'-'+j;
document.getElementById('maindiv').appendChild(listdiv);
}
}
alert(document.getElementById('maindiv').innerHTML);
}
var gametest=new CLASS_SL(5,5,'game');
gametest.show();
</script>
[/code] 没看明白,不过你加个样式先试下
overflow:hidden; 就是CLASS_SL这个类,传入参数(列数,行数,要生成小方块的DIV的ID),然后用JS生成5X5个小方块。在FF里面,小方块都是10X10PX的,在IE里面,结果变成了高度为20PX的长方形了 这好像是firefox和IE计算边框的方式不一样所造成的 没有详细看 但是严格的说div标签的底下是不能直接跟li标签的 是否是这个原因我不清楚 你可以换其他标签看看 [i=s] 本帖最后由 shypest 于 2009-12-16 12:08 PM 编辑 [/i]
[code]for(i=0;i<=5;i++)
{
var t=document.createElement('div');
t.id='tdiv'+i;
t.style.width='10px';
t.style.height='10px';
document.appendChild(t);
}
[/code]如上代码,出来的DIV在IE中 不是方的?FF中是10X10的,但是IE中全是长方形了 t.style.overflow='hidden';
不是让你加上这个试试 [quote]for(i=0;i
[size=2][color=#999999]shypest 发表于 2009-12-16 12:06 PM[/color] [url=http://www.phpx.com/happy/redirect.php?goto=findpost&pid=1142307&ptid=258587][img]http://www.phpx.com/happy/images/common/back.gif[/img][/url][/size][/quote]
样式问题,font-size:0px。 路过 看看 [quote]
样式问题,font-size:0px。
[size=2][color=#999999]未注册会员 发表于 2009-12-16 05:14 PM[/color] [url=http://www.phpx.com/happy/redirect.php?goto=findpost&pid=1142324&ptid=258587][img]http://www.phpx.com/happy/images/common/back.gif[/img][/url][/size][/quote]
这个应该可行
页:
[1]