2

我有一个宽度为 49% 的 div（作为响应式布局的一部分）。在这个 div 中，我将两张图像堆叠在一起，一张是相对定位的，一张是绝对定位的。它们都以父级为中心——相对的使用margin: 0 auto;和绝对的使用margin:0 auto; left:0; right:0;。

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

我在适用于 Windows 的 Chrome 21 中得到了这种不同。它在 Firefox 或 IE 中不存在，所以我想知道这是否是 Chrome 中的一个已知错误，是否有修复？

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

4

1 回答 1

2

它真的很有趣，你可以通过使用逻辑上相同的位置

.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;
}

但实际上，当尝试获取两个图像的左侧位置时，左侧位置存在 0.5px 的差异 

relative-img - 65.5 
absolute-img - 66

看到这个控制台

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

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

但结果还是一样

relative-img - 65.5 
absolute-img - 66

惊讶吗？

对此的答案可能是事实上：在 Chrome 中，值小数部分被截断，因此 65、65.5 和 65.6 都显示相同的结果

于 2012-09-20T09:23:52.500 回答