Question

我的背景图片居中，Chrome显示偏移一个像素。

CSS

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    width: 100%
}
#header {
    width: 986px;
    margin: 100px auto 0 auto;
}

HTML

<html>
<body>
    <div id="container">
        <div id="header">centered content</div>
    </div>
</body>
</html>

我想这与不同浏览器如何处理CSS中center的{{1}} - 或50%属性有关：

enter image description here

是否有已知的（simple）hack或替代方法来解决此问题？后台容器的为100％宽。

Answer 1

如果您可以输出比浏览器窗口更宽的图像，则应该修复它。

如果在此处找到解决方案 - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

Answer 2

对我来说，这就是诀窍：

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

我会在几天前发现这个解决方案后立即发布此解决方案的链接。在同一篇文章中，那个人说问题是容器宽度的奇数或偶数。无论如何，这解决了我的问题。

Answer 3

如果您将背景图像宽度设为奇数（987px），则所有浏览器的定位将保持一致。这似乎是违反直觉的，但似乎总是在没有任何CSS黑客的情况下为我解决问题。

Answer 4

图像实际上是986px吗？我找到修复它的最简单方法是确保图像的宽度是偶数。

您可以做的另一件事是在背景图像中添加一个2px缓冲区（以保持宽度为偶数）以说明该偏移。只要您向每一侧添加一个px以保持均匀，就不应该在浏览器中查看图像。

Answer 5

尝试调整浏览器的大小以查看它是如何工作的......我们在这里讨论的是像素，如果窗口的宽度均匀，那就没关系，否则像素必须在某个地方丢失。

Answer 6

我认为背景图像的宽度也是986像素？然后这个效果也应该在左侧可见，但转过来。

我建议从容器中删除背景图片并将其添加到标题中：

#container {
    width: 100%;
}
#header {
    width: 986px;
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    margin: 100px auto 0 auto;
}

Answer 7

我使用以下CSS来修复webkit上的问题。如果没有启用JS，它的工作原理是浏览器可能是全屏的，因此webkit上的视口宽度将是一个奇数

<强> CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html {
        margin-left: 1px;
    }
    html.evenWidth {
        margin-left: 0px;
    }
}

JavaScript（jquery）

$(document).ready(function {
var oWindow = $(window),
htmlEl = $('html');

function window_width() {
    if(oWindow.width() % 2 == 0) {
        htmlEl.addClass('evenWidth');
    } else {
        htmlEl.removeClass('evenWidth');
    }
}

$(document).ready(function(){
    window_width();
    $(window).resize(window_width);
});

背景中心与铬（错误）

7 个答案: