How do I fix 1px margin on Google Chrome?

html css google-chrome

13,500

Solution 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/

Solution 2

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;
    }
}

13,500

Author by

Unknown Error

Updated on June 18, 2022

Comments

Unknown Error almost 2 years

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?

Unknown Error about 12 years

It will fixed on webkit and not for IE or Firefox
Unknown Error about 12 years

On FF or IE you will see have margin-left:-1px. Shadow is gone on left.
XedinUnknown about 11 years

First snippet creates a space between full-size background and full-size elements. Second snippet only works for window widths larger than ~1660px. I really need to align a large semi-transparent background image of element A with a smaller element B, which has a semi-transparent background colour. If the two were 100% opaque, I would just increase slightly the width of the smaller one, so that it would cover any "misplaced" pixels. Plz plz plz =)