Html 居中背景图像和居中DIV之间的偏差取决于浏览器宽度

我有一张背景图片，上面有一个正方形，它的大小和覆盖这个正方形的div一样。（这里没有提到这一点的原因）。将此背景图像和div居中时，它们不会在特定浏览器宽度上重叠。重新调整浏览器大小时，有时背景方形会偏离1像素。正如您在下面的示例和JSFIDLE中所看到的，当拖动浏览器的宽度时，有时可以看到背景正方形的1个像素

有解决办法吗？为什么元素之间的定位不同步

尝试重新调整FIDLE view端口宽度的大小，您将看到，当出现未对齐时，青色背景方形有时是可见的

JSFiddle：

代码：

没有任何运气就尝试了这个：

    /* Fix form centering background input chrome */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        html {
            margin-left: 1px;
        }
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        body {
            background-position: 50.001% 0;
        }
    }

---

顺便说一下。。。这在Chrome 43.0.2357.81 m版中会发生。这取决于浏览器处理不均匀值以及对齐背景和内容的方式

当容器的宽度值为奇数时会发生这种情况，因为容器中的元素的宽度值为偶数。例如，如果元素的宽度为800px，容器的宽度为855px，那么元素周围将剩下855-800=55px的空间，现在浏览器必须将其两边分开。它将下降到每边22.5像素，但由于它不能绘制半个像素，因此必须对数字进行四舍五入。因此，元素的一侧会得到23px，另一侧会得到22px

现在有人可能会说，背景图像本身的处理方式是相同的，因此对齐方式应该是相同的，但事实上，这完全取决于浏览器的构建方式，这就是为什么在不同的浏览器中会得到不同的结果

---

在没有看到实际项目的情况下，很难提出解决方案，因为这可能是一个完全不同的解决方案。

这将是一个浏览器像素舍入问题，我敢肯定是的，正如塔内尔·埃罗在下面的帖子中所讨论的，DIV和背景图像的中心应该以相同的方式舍入！所以让我们听听“非javascript”，基于CSS的解决方法：）谢谢您的输入！后台定心和div定心在逻辑上应以相同的方式处理。不过，这可能更适合在谷歌chrome建议论坛中提出建议（正如您指出的，这是一个浏览器问题）。我会把这个Q打开。。。也许在某个地方有很好的解决办法。。。

    div{
        background-color: yellow;   
        width: 800px;
        margin: 0 auto;
    }
    html{
        background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat;
        margin: 0;
        padding: 0;    
    }
    body{
        margin: 0;
        padding: 0;
    }

    /* Fix form centering background input chrome */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        html {
            margin-left: 1px;
        }
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        body {
            background-position: 50.001% 0;
        }
    }