Comment puis-je corriger 1px marge sur Google Chrome?

Ici un exemple 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>

Si vous affichez un exemple ci-dessus sur Google Chrome, vous verrez le .menu ressemble ont un margin-left:-1px ou margin-right:1px.

Sur Firefox & IE plus grand. Comment puis-je résoudre ce problème?

voici une photo ci-dessus est firefox, ci-dessous est en chrome. je ne vois aucune différence i.imgur.com/OSu9D.png
voici mon Chrome.. i.imgur.com/W1Mhj.png je sais ce que les OS et la version de Chrome que vous utilisez?
windows 7, chrome 17

OriginalL'auteur Unknown Error | 2012-03-17

  1. 3
    @media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

    Arrière-plan centre avec 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/

    Premier extrait de code crée un espace entre la taille de l'arrière-plan et de taille des éléments. Deuxième extrait de code ne fonctionne que pour des largeurs de fenêtre plus grande que ~1660px. J'ai vraiment besoin d'aligner un gros semi-transparente de l'image d'arrière-plan de l'élément A un plus petit élément de B, qui a un fond semi-transparent de couleur. Si les deux étaient de 100% opaque, je voudrais juste augmenter légèrement la largeur de la plus petite, de sorte qu'il s'appliquerait à tous les "égarés" pixels. Plz plz plz =)

    OriginalL'auteur huhu

  2. 1

    Similaire à rudsy réponse, mais celle-ci semble mieux fonctionner:

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

    OriginalL'auteur Robert Pessagno

  3. 0

    Définir le corps de la marge à 0 ...Essayez ce 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;
}

    OriginalL'auteur nunya

  4. 0

    Chrome & firefox rendus différemment c'est mieux si vous voulez résultat même dans tous les navigateurs le toujours donner la largeur en MÊME valeurs qui ne sont pas dans BIZARRE. Donc, écrire comme ceci:

    .menu {
    width:990px;
}

    Cochez cette http://jsbin.com/oqisuv/2

    Mis à JOUR
    Si vous voulez, c'est le travail parfait dans google chrome, vous pouvez utiliser ceci:

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

    Cochez cette http://jsbin.com/oqisuv/5/

    Il sera fixé sur webkit et pas pour IE ou Firefox
    vérifier mon exemple, c'est le travail dans tous les navigateurs
    Sur FF ou IE, vous verrez ont margin-left:-1px. L'ombre est parti sur la gauche.

    OriginalL'auteur sandeep

  5. 0

    La plupart des navigateurs et l'avenir solution est de fixer fond centrés bloc lui-même (ou de son centrée parent qui a la remplissage horizontal d'arrière-plan pour être visible à l'extérieur de son enfant).

    Tentatives pour parvenir au pixel correspondant de l'arrière-plan et le bloc centré de manière indépendante (surtout avec des hacks pour certains navigateurs) est mort à la fin de la route.

    OriginalL'auteur Marat Tanalin