Question

CSS

body {
    background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
}
.menu {
    width:989px;
    margin:auto;
    height:100px;
    background:#666666;
    line-height:100px;
    text-align:center;
    color:#fff;
}

HTML

<body>
 <div class="menu">Hello</div>
</body>

如果您在Google Chrome上查看上面的示例，您会看到.menu看似margin-left:-1px或margin-right:1px。

在Firefox＆amp; IE它看起来很棒。我该如何解决这个问题？

Answer 1

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

html {
    margin-left: 1px;
}

}

Background center with chrome (bug)

body {   
 background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) 50% 0 repeat-y;   
} 

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

http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

Answer 2

与rudsy的答案类似，但这个似乎更好：

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

Answer 3

Chrome＆amp; firefox渲染方式不同，如果你想在所有浏览器中使用相同结果，总是在偶数值中提供宽度，而不是在 ODD 中。所以，写这样：

.menu {
    width:990px;
}

选中此http://jsbin.com/oqisuv/2

<强>已更新如果你想要它在chrome中的完美工作，你可以使用它：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .menu {
    width:990px;
 }

选中此http://jsbin.com/oqisuv/5/

Answer 4

将身体边距设为0 ...试试这个css：

body {
background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
margin: 0;
}
.menu {
width:990px;
height:100px;
margin: 0 auto;
background:#666666;
line-height:100px;
text-align:center;
color:#fff;
}

Answer 5

大多数跨浏览器和面向未来的解决方案是将背景附加到居中的块本身（或其背景为水平填充的中心父级，以便在其子级外部显示背景）。

尝试实现像素完美匹配的背景和块独立居中（特别是对于特定浏览器的黑客攻击）是一条死路。

如何修复Google Chrome上的1px保证金？

5 个答案: