HTML – 如何在Google Chrome上修复1px保证金？

发布时间：2020-12-14 22:46:58 所属栏目：资源来源：网络整理

导读：这里有一个例子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;}

这里有一个例子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


如果您在Google Chrome上查看上面的示例,您会看到.menu看起来像是左边距：-1px或margin-right：1px.
在Firefox& IE它看起来很棒.我该如何解决这个问题？


最佳答案

@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/
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!