中心背景图像与居中DIV之间的不对齐取决于浏览器宽度

Question

我有一个背景图像，其正方形与覆盖此正方形的div相同。 （这里没有提到上帝的原因）。在将此背景图像和div居中时，它们在某些浏览器宽度上不会重叠。在重新调整浏览器大小时，有时背景方块未对齐1个像素。正如您在下面的示例和JSFiddle中所看到的，当拖动浏览器的宽度时，有时会看到背景方块的1个像素。

有解决方案吗？为什么元素之间的定位没有同步？

尝试重新调整小提琴视口宽度的大小，您会看到当发生错位时，青色背景有时是可见的。

JSFiddle：http://jsfiddle.net/jj3qxL3k/

代码：

[Metric(typeof(IMetric), "MetricB", "MetricB")]
public class MetricB: IMetric { ... }

CSS

    <div>CONTENT DIV</div>

没有运气就试过了：

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

顺便说一句......在Chrome版本43.0.2357.81 m中，这种情况发生在我身上。

Answer 1

这取决于浏览器如何处理不均匀的值并对齐背景和内容。

当容器具有奇数宽度值时会发生这种情况，因为容器内的元素具有偶数宽度值。例如，如果您的元素宽度为800px且容器宽度为855px，则元素周围将留下855-800 = 55px的空间，现在浏览器必须将其划分为两侧。它会降低到每边22.5像素，但由于它无法绘制半个像素，因此必须对数字进行舍入。因此元素的一侧将获得23px而另一侧将获得22px。

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

在没有看到实际项目的情况下建议解决方法相当困难，因为它可能必须是一个不同的解决方案。