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>

我现在把这个CSS放在头上......

<style>

div h3 {color: green;}

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

}
</style>

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

任何帮助表示赞赏：）

Answer 1

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

所以看起来IE添加了＆＃39; px＆＃39;

结尾

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

并正确解释

Chrome无法附加＆＃39; px＆＃39;所以我刚刚将代码更改为

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

无论如何，这应该是最好的做法。

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

1 个答案: