Unknown Error Unknown Error - 2 months ago 9
CSS Question

How do I fix 1px margin on Google Chrome?

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?

Answer
@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/

Comments