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

我有一个正方形的背景图像，其大小与覆盖此正方形的div大小相同。（这里没有提到这是神的原因）。当将这个背景图片和div对齐时，它们在某些浏览器宽度上不会重叠。当重新调整浏览器的大小时，有时背景方块会错位1个像素。正如你可以在下面的例子和JSFiddle中看到的那样，拖动浏览器宽度时，背景方块的1个像素有时是可见的。取决于浏览器宽度的居中背景图像和居中的DIV之间的不对齐

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

enter image description here

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

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

代码：

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

enter image description here

<div>CONTENT DIV</div>

CSS试过这种没有任何的运气：

/* 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米。

来源

2015-06-11 Jesper Wilfing

这将是一个浏览器像素四舍五入问题，我敢肯定 –

是的，正如Tanel Eero的帖子中所讨论的，这个DIV和Background-image的居中应该以同样的方式圆整！所以...让我们听听“非JavaScript”，基于CSS的解决方法:) –

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

当你的容器有一个奇数的宽度值时，会发生这种情况，因为你的容器内的元素的宽度值是偶数。例如，如果你的元素宽度为800px，容器宽度为855px，那么你的元素周围会有855-800 = 55px的空间，现在浏览器必须将这个空间分开。它会降低到每边22.5像素，但由于它不能画出半个像素，所以不得不四舍五入。所以元素的一边会得到23px，另一边是22px。

现在可以认为背景图像本身的处理方式是相同的，所以对齐应该是相同的，但事实上，这完全取决于浏览器的构建方式，这就是为什么您在不同的结果中获得不同的结果浏览器。

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

来源

2015-06-11 09:15:12

感谢您的输入！在逻辑上应该以相同的方式处理背景居中和div居中。然而，这可能更适合在谷歌浏览器建议论坛中提出建议（正如您指出其浏览器问题）。我会保持这个Q打开...可能有很好的解决方法在那里... –

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

回答

相关问题