Javascript 动态创建的Div'；s、 外部分区的子项，镀铬位置错误，但IE位置正确

我有一些javascript动态创建包含JSON数据的DIV元素。我将这些div附加到父“outerDiv”中

我希望外层是一个水平放置在中心的容器，并与窗户顶部对接

我想要的内部div然后以特定的方式排列在容器中

我以为我已经实现了我想要的，因为它在IE中正确显示，但当我在Chrome中打开它时，所有的div都在outerDIV容器中彼此重叠

这是我的密码

<script>

var data = { "users":[
    { "Club" : "Ashford",
    "Defeated" : false,
    "Score" : 520000,
    "Team Name" : "Assassins",
    "Id" : 1
  },
  { "Club" : "Eltham Hill",
    "Defeated" : true,
    "Score" : 480000,
    "Team Name" : "Crusaders",
    "Id" : 2
  },
  { "Club" : "Sittingbourne",
    "Defeated" : false,
    "Score" : 610000,
    "Team Name" : "Strikers",
    "Id" : 3
  },
  { "Club" : "Watford",
    "Defeated" : true,
    "Score" : 180000,
    "Team Name" : "Wanderers",
    "Id" : 4
  }
]}


var outerDiv = document.createElement("div");
outerDiv.id = "map";
document.body.appendChild(outerDiv);
//document.body.style.position='relative';
//document.body.style.left=200;

for (var z in data.users) {

    if (z % 2 == 0){
    var divTag = document.createElement("div");
    divTag.id = data.users[z].Id;
    divTag.innerHTML = "<H2>" + data.users[z].Club + "</h2>" + "</br> <h3>" + data.users[z].Score +"</h3>";
    document.getElementById('map').appendChild(divTag);
    document.getElementById(data.users[z].Id).style.position='absolute';
    document.getElementById(data.users[z].Id).style.left=10;
    document.getElementById(data.users[z].Id).style.top=(data.users[z].Id - 1) * 100;
    document.getElementById(data.users[z].Id).style.color='rgb(0,100,255)';
        }
    else {
    var divTag = document.createElement("div");
    divTag.id = data.users[z].Id;
    divTag.innerHTML = "<H2>" + data.users[z].Club + "</h2>" + "</br> <h3>" + data.users[z].Score +"</h3>";
    document.getElementById('map').appendChild(divTag);
    document.getElementById(data.users[z].Id).style.position='absolute';
    document.getElementById(data.users[z].Id).style.left=600;
    document.getElementById(data.users[z].Id).style.top=(data.users[z].Id - 1) * 100;
    document.getElementById(data.users[z].Id).style.color='rgb(200,10,20)';
        }
}



</script>

变量数据={“用户”：[
{“俱乐部”：“阿什福德”，
"败":假,，
“分数”：520000，
“团队名称”：“刺客”，
“Id”：1
},
{“俱乐部”：“埃尔坦山”，
“失败”：没错，
“分数”：48万，
“团队名称”：“十字军”，
“Id”：2
},
{“俱乐部”：“Sittingbourne”，
"败":假,，
“分数”：610000，
“球队名称”：“前锋”，
“Id”：3
},
{“俱乐部”：“沃特福德”，
“失败”：没错，
“分数”：180000，
“团队名称”：“流浪者”，
“Id”：4
}
]}
var outerDiv=document.createElement（“div”）；
outerDiv.id=“映射”；
文件.正文.附件（outerDiv）；
//document.body.style.position='relative'；
//document.body.style.left=200；
for（data.users中的var z）{
如果（z%2==0）{
var divTag=document.createElement（“div”）；
divTag.id=data.users[z].id；
divTag.innerHTML=“”+data.users[z].Club++“
”+data.users[z].Score+”；
document.getElementById（'map'）.appendChild（divTag）；
document.getElementById（data.users[z].Id）.style.position='absolute'；
document.getElementById（data.users[z].Id）.style.left=10；
document.getElementById（data.users[z].Id）.style.top=（data.users[z].Id-1）*100；
document.getElementById（data.users[z].Id）.style.color='rgb（0100255）'；
}
否则{
var divTag=document.createElement（“div”）；
divTag.id=data.users[z].id；
divTag.innerHTML=“”+data.users[z].Club++“
”+data.users[z].Score+”；
document.getElementById（'map'）.appendChild（divTag）；
document.getElementById（data.users[z].Id）.style.position='absolute'；
document.getElementById（data.users[z].Id）.style.left=600；
document.getElementById（data.users[z].Id）.style.top=（data.users[z].Id-1）*100；
document.getElementById（data.users[z].Id）.style.color='rgb（200,10,20）'；
}
}

我现在脑子里有这个CSS

<style>

div h3 {color: green;}

div#map{
   width: 600px;
   height: 2000px;
   position: absolute;
   top: 0%;
   left: 20%;

}
</style>

div h3{颜色：绿色；}
分区图{
宽度：600px；
高度：2000px；
位置：绝对位置；
最高：0%；
左：20%；
}

为什么它在IE中看起来正确，但在Chrome中却不正确？ 我希望它在所有浏览器、桌面和移动设备中都能正确显示

---

感谢您的帮助：）

完成了……就像我想的那样简单

因此，IE似乎将“px”添加到了

document.getElementById(data.users[z].Id).style.left=10;

并且正确地解释了它

Chrome没有添加“px”，所以我只是将代码改为

document.getElementById(data.users[z].Id).style.left=10 + "px";

---

无论如何都应该这样做，这才是最佳实践。

快速查看：没有像
这样的html标记，它可能会丢弃“好”浏览器。谢谢……但这并不是问题的根源：(