javascript - 动态创建的 Div，外部 Div 的子级，在 Chrome 中位置错误，但在 IE 中正确

Question

我有一些 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 中却不然？ 我希望它在所有浏览器(桌面和移动设备)中看起来都是正确的。

感谢任何帮助:)

Answer 1

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

看起来 IE 在末尾添加了“px”

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

并正确解释它

Chrome 不会附加“px”，因此我刚刚将代码更改为

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

无论如何都应该这样做，以获得最佳实践。