如果容器具有非整数(%)位置，则子位置与指定的位置不同。
我已居中(position: absolute; left: 50%; margin: -50px;) 100 div宽度div(容器)。
它的绝对定位子div与overflow: hidden，它的大小是100x2000 px (这样的高度是为了测试目的，如下所述)。
在子div中有一个图像，它是绝对定位的。图像是3100x100 px,，它包含动画帧。
我通过将它的style.left从0更改为-1100 is来动画这个图像，步骤是100 is。一切都很好，但当身体宽度不均匀时，我会遇到奇怪的问题。
如果有滚动条，并且滚动条有奇怪的宽度(例如，在Chrome/ can 32上就会发生这种情况)。在这种情况下，一旦动画图像通过屏幕边缘(对于1920x1080，它大约发生在9-10帧的动画)，图像视觉水平就会移动1像素。我找不到解决这个问题的办法。
重现问题的工作示例可以找到这里
子div高度设置为2000 to，以确保滚动条可见。如果滚动条的宽度为偶数，则可以通过将浏览器窗口调整为奇数宽度来重现问题。
回答 3
Stack Overflow用户
发布于 2012-11-24 12:25:26
在我看来，这似乎是Chrome中的一个bug。当在整数中定义百分比时，它们的行为非常出人意料。尝试将该位置定义为小数，而不是：
.outer {
position: absolute;
left: 49.99999%;
margin-left: -50px;
}我在小提琴上测试了这一点，它似乎能做到这一点。
Stack Overflow用户
发布于 2012-11-24 12:19:32
这是因为浏览器舍入引擎。Webkit显然在奇偶宽度上与50%有一些问题。
克服这一问题的一种方法是基于窗口宽度重新定位.outer元素。
document.getElementById( 'outer' ).style.left = Math.floor( window.innerWidth / 2 ) + 'px';Stack Overflow用户
发布于 2012-11-24 11:44:15
您需要将.inner img position更改为relative并更新您的javascript。我为您做了一些更改，下面是您已解决的代码：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body {
background-color: #000000;
}
.outer {
position: absolute;
left: 50%;
margin-left: -50px;
}
.inner {
position: absolute;
width: 100px;
height: 2000px;
overflow: hidden;
}
.inner img {
position: relative;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<img src="http://lorgame.ru/test.png" id="img">
</div>
</div>
<script language="JavaScript">
var framesCount = 30;
var framesCurrent = 0;
var framesMoveLeft = true;
var img = document.getElementById('img');
var interval = setInterval(function() {
if(framesMoveLeft == true){
framesCurrent++;
img.style.left = (img.offsetLeft - 100) + 'px';
if(framesCurrent == framesCount) framesMoveLeft = false;
} else { // Move right
framesCurrent--;
img.style.left = (img.offsetLeft + 100) + 'px';
if(framesCurrent == 0) framesMoveLeft = true;
}
}, 100);
</script>
</body>
</html>https://stackoverflow.com/questions/13504766
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号