How do I fix 1px margin on Google Chrome?

2020-07-13 10:07发布

站内问答 / HTML/CSS
1632 5 4

Here an example 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>

If you view an example above on Google Chrome you will see the .menu looks like have a margin-left:-1px or margin-right:1px.

On Firefox & IE it's look great. How do I fix this one?

5条回答
Root（大扎）
2楼-- · 2020-07-13 10:54

Set the body margin to 0 ...Try this 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;
}
查看更多
0人赞 添加讨论(0) 举报
做个烂人
3楼-- · 2020-07-13 10:54

Chrome & firefox rendered differently it's better if you want result same in all browser the always give width in EVEN values not in ODD. So, write like this:

.menu {
    width:990px;
}

Check this http://jsbin.com/oqisuv/2

UPDATED If you want it's work perfect in chrome the you can use this:

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

Check this http://jsbin.com/oqisuv/5/

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
4楼-- · 2020-07-13 10:59

Similar to rudsy's answer, but this one seems to work better:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 49.999% 0;
    }
}
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
5楼-- · 2020-07-13 10:59

Most cross-browser and future-proof solution is to attach background to centered block itself (or to its centered parent that has horizontal padding for background to be visible on the outside of its child).

Attempts to achieve pixel-perfect matching of background and block centered independently (especially with hacks for specific browsers) is dead-end road.

查看更多
0人赞 添加讨论(0) 举报
混吃等死
6楼-- · 2020-07-13 11:00 
@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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)