¿Cómo arreglo el margen de 1px en Google Chrome?

Aquí un ejemplo http://jsbin.com/oqisuv/¿Cómo arreglo el margen de 1px en Google Chrome?

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 ve un ejemplo más en Google Chrome, verá el .menu parece tener un margin-left:-1px o margin-right:1px.

En Firefox & IE se ve genial. ¿Cómo puedo arreglar esto?

Fuente

2012-03-17 Unknown Error

aquí es una imagen, es por encima de Firefox, a continuación es de cromo. no veo ninguna diferencia http://i.imgur.com/OSu9D.png –

@AndreiS aquí está mi Chrome .. http://i.imgur.com/W1Mhj.png ¿puedo saber qué versión de SO y Chrome usas? ? –

windows 7, chrome 17 –

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

Fuente

2012-03-17 18:22:38 huhu

El primer fragmento crea un espacio entre el fondo de tamaño completo y los elementos de tamaño completo. El segundo fragmento solo funciona para anchos de ventana superiores a ~ 1660 px. Realmente necesito alinear una gran imagen de fondo semitransparente del elemento A con un elemento B más pequeño, que tiene un color de fondo semitransparente.Si los dos fueran 100% opacos, aumentaría ligeramente el ancho del más pequeño, de modo que cubriría cualquier píxel "extraviado". Plz plz plz =) – XedinUnknown

Chrome Firefox & prestados de manera diferente que es mejor si quieres resultar igual en todos los navegadores de la anchura siempre dan en EVEN valores no en ODD. Por lo tanto, escribir así:

.menu { 
    width:990px; 
}

Marque esta http://jsbin.com/oqisuv/2

ACTUALIZADO Si desea es un trabajo perfecto en cromo la puede utilizar esto:

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

Marque esta http://jsbin.com/oqisuv/5/

Fuente

2012-03-17 17:49:13 sandeep

Se fijará en webkit y no para IE o Firefox –

verifique mi ejemplo, funciona en todos los navegadores – sandeep

En FF o IE verá 'margin-left: -1px'. Shadow se ha ido a la izquierda. –

Establezca el margen del cuerpo en 0 ... Pruebe este código 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; 
}

Fuente

2012-03-17 18:01:24 doitliketyler

La mayoría de navegadores y solución a prueba de futuro es unir fondo a sí mismo bloque de centrado (o para su matriz centrada que tiene relleno horizontal para que el fondo sea visible en el exterior de su niño).

Los intentos de lograr una coincidencia perfecta de píxeles de fondo y bloques centrados de forma independiente (especialmente con hacks para navegadores específicos) son caminos sin salida.

Fuente

2012-03-17 18:44:56

Similar a la respuesta de rudsy, pero éste parece funcionar mejor:

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

Fuente

2013-06-05 18:03:58

¿Cómo arreglo el margen de 1px en Google Chrome?

Respuesta

Cuestiones relacionadas