css - 父级中绝对定位图像与相对定位图像上的 chrome 的左偏移差异是不均匀的像素宽度

Question

我有一个宽度为 49% 的 div(作为响应式布局的一部分)。在这个 div 中，我有两张图像堆叠在一起，一张相对定位，一张绝对定位。它们都以父级为中心 - 相对的使用 margin: 0 auto; 和绝对的使用 margin:0 auto;左:0；右:0；。

现在，Chrome 有时(取决于窗口宽度)会在绝对图像和相对图像之间产生一两个像素的偏移差异。这可以在 my Fiddle 中看到检查图像元素时 - 如果您在 Chrome 中看不到差异，请尝试稍微调整窗口大小。

我在 Windows 版 Chrome 21 中发现了这种差异。它在 Firefox 或 IE 中不存在，所以我想知道这是否是 Chrome 中的一个已知错误，是否有修复？

更新:这似乎不是父级宽度百分比的结果，而是每当父级的像素宽度不均匀时它就会出现，请参阅 updated Fiddle .

Answer 1

这真的很有趣，你可以通过使用

使两者在逻辑上相同

.wrapper {
    position: relative;
    background-color: yellow;
    height: 200px;
    width: 215px;
}
.relative-img {
    display: block;
    width: 100px;
    position: relative;
    margin: 0 auto;
}
.absolute-img {
    display: block;
    width: 100px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
}

但实际上，当尝试获取两个图像的左侧位置时，左侧位置有 .5px 的差异

relative-img - 65.5 
absolute-img - 66  

查看 this 的控制台

我还尝试通过分配绝对值使它们相同

$(".relative-img").offset().left =$(".absolute-img").offset().left;

结果还是一样

relative-img - 65.5 
absolute-img - 66 

惊讶吗？

这个问题的答案可能是事实上:在 Chrome 中，值的小数部分被截断，因此 65、65.5 和 65.6 都显示相同的结果Skilldrick 的精彩演示|是hear