动态创建Div's、 外部Div的孩子，在Chrome中的位置错误，但在IE中是正确的

我有一些javascript，它可以动态创建包含JSON数据的div元素。我将这些DIV附加到父"outerDiv"。

我希望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>

我现在在Head中有这个CSS。。。

<style>
div h3 {color: green;}
div#map{
   width: 600px;
   height: 2000px;
   position: absolute;
   top: 0%;
   left: 20%;
}
</style>

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

感谢任何帮助：）