Fatal编程技术网
  • javascript/
  • Javascript元素被放置在FF和Chrome中的不同位置，为什么？

Javascript元素被放置在FF和Chrome中的不同位置，为什么？

javascript html css

Javascript元素被放置在FF和Chrome中的不同位置，为什么？,javascript,html,css,Javascript,Html,Css,我正在用纯JS制作一个基于浏览器的游戏，在FF和Chrome中我的元素被放置的位置上得到了不同的结果。具体来说，我使用css类“cup”的元素在非常不同的位置渲染，这是一个突破。Firefox将这些元素放置在我希望的位置，chrome则不然。我这里有一个活生生的例子： 如果我看到的差异图片有帮助，我会上传一张 index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="te

我正在用纯JS制作一个基于浏览器的游戏，在FF和Chrome中我的元素被放置的位置上得到了不同的结果。具体来说，我使用css类“cup”的元素在非常不同的位置渲染，这是一个突破。Firefox将这些元素放置在我希望的位置，chrome则不然。我这里有一个活生生的例子：

如果我看到的差异图片有帮助，我会上传一张

index.html

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="game.js"></script>

</head>
<body>

</body>
</html>
game.js

#table {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

#ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px black solid;
    background-color: white;
    position: absolute;
}

.cup {
    position: absolute;
}

var players = [];

window.onload = function () {

    var player = {id:1, goals:0, shots:0}
    players[0] = player;

    player = {id:2, goals:0, shots:0}
    players[1] = player;

    var table = document.createElement("img");
    table.src = "images/table.png";
    table.id = "table";

    document.body.appendChild(table);

    var ball = document.createElement("div");
    ball.id = "ball";
    document.body.appendChild(ball);
    ball.style.top = table.getBoundingClientRect().top + (table.offsetHeight / 2) - (ball.offsetHeight / 2) + "px";
    ball.style.left = table.getBoundingClientRect().left + (table.offsetWidth / 2) - (ball.offsetWidth / 2) + "px";

    //Player 1 cups.
    var cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.top = table.getBoundingClientRect().top + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) - cup.offsetWidth + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.top = table.getBoundingClientRect().top + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.top = table.getBoundingClientRect().top + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + cup.offsetWidth + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.top = table.getBoundingClientRect().top + cup.offsetHeight + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) - (cup.offsetWidth / 2) + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.top = table.getBoundingClientRect().top + cup.offsetHeight + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + (cup.offsetWidth / 2) + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.top = table.getBoundingClientRect().top + (cup.offsetHeight * 2) + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + "px";

    //Player 2 cups.
    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.bottom = table.getBoundingClientRect().top + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) - cup.offsetWidth + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.bottom = table.getBoundingClientRect().top + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.bottom = table.getBoundingClientRect().top + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + cup.offsetWidth + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.bottom = table.getBoundingClientRect().top + cup.offsetHeight + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) - (cup.offsetWidth / 2) + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.bottom = table.getBoundingClientRect().top + cup.offsetHeight + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + (cup.offsetWidth / 2) + "px";

    cup = document.createElement("img");
    cup.src = "images/cup.png";
    cup.className = "cup";
    document.body.appendChild(cup);
    cup.style.bottom = table.getBoundingClientRect().top + (cup.offsetHeight * 2) + "px";
    cup.style.left = (window.innerWidth / 2) - (cup.offsetWidth / 2) + "px";

}
在我看来，这就像一场比赛；访问
offsetWidth
和
offsetHeight
的代码假定使用图像源的元素已调整大小

我会预先加载图像并获得它们的大小，或者只是有一个包含这些大小的变量，然后使用这些静态大小来执行定位逻辑，而不是假设杯子元素已经计算了它们的大小

更新：

预压可能是过度压井；只需在变量中存储宽度+高度。如果您确实希望预加载（以便图像更改时代码不会更改），可以使用以下技术：

function getImageSize(src, callback) {
  var img = new Image();
  img.onload = function() {
    callback({ width: img.width, height: img.height });
  }
  img.src = src;
}
然后像这样消费：

getImageSize('/path/to/img.png', function(size) {
    var width = size.width;
    var height = size.height;

    // do stuff with width & height
});
我假设FF是正确的？是的，Zze，我会把它添加到我的问题中，谢谢。FF的渲染是正确的，但我自己是一个Chrome用户，所以这是不可接受的，我知道现在很多人都在使用Chrome。旁白，不要重复你自己！每个杯子的制作变化很小。将其移动到一个接受放置参数的函数中。谢谢Jacob，我考虑过在for循环中这样做。一旦我有了一个工作原型，我就计划进行重构，这仍然是一个很长的路要走。但我会接受这个建议，然后我可以在调整窗口大小时调用它。在我为onresize添加一个处理程序之前，当前调整大小会破坏预期的位置。嘿，雅各布，你认为这会解决这个特定的问题吗？预加载是指将img元素插入index.html，而不是用JS创建并附加到文档体中？谢谢你的回复。你甚至不需要插入图片；添加了示例代码。非常有用的东西，我真的很感激。似乎img.onload事件对于使用JS制作浏览器游戏非常重要。