如何在 Google Chrome 上修复 1px 边距？答案

【问题标题】：How do I fix 1px margin on Google Chrome?如何在 Google Chrome 上修复 1px 边距？
【发布时间】：2016-09-16 19:21:39
【问题描述】：

这里是一个例子http://jsbin.com/oqisuv/

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 和 IE 上看起来很棒。我该如何解决这个问题？

【问题讨论】：

这是一张图片，上面是firefox，下面是chrome。我看不出有什么区别i.imgur.com/OSu9D.png
@AndreiS 这是我的 Chrome..i.imgur.com/W1Mhj.png我可以知道您使用的操作系统和 Chrome 版本吗？

标签： html css google-chrome

【解决方案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/

【讨论】：

首先 sn-p 在全尺寸背景和全尺寸元素之间创建一个空间。第二个 sn-p 仅适用于大于 ~1660px 的窗口宽度。我真的需要将元素 A 的大型半透明背景图像与具有半透明背景颜色的较小元素 B 对齐。如果这两个是 100% 不透明的，我会稍微增加较小的宽度，这样它就可以覆盖任何“错位”的像素。 PLZ PLZ PLZ =）

【解决方案2】：

与 rudsy 的回答类似，但这个似乎效果更好：

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

【讨论】：

【解决方案3】：

将正文边距设置为 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;
}

【讨论】：

【解决方案4】：

Chrome 和 firefox 以不同的方式呈现，如果您希望所有浏览器中的结果相同，则最好始终以 EVEN 值而不是 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/

【讨论】：

它将固定在 webkit 上，而不是 IE 或 Firefox
在 FF 或 IE 上，您会看到 margin-left:-1px。左边的阴影消失了。

【解决方案5】：

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

尝试实现像素完美匹配的背景和独立居中的块（尤其是针对特定浏览器的 hack）是一条死路。

【讨论】：