Jak naprawić margines 1px w Google Chrome?

Oto przykład http://jsbin.com/oqisuv/Jak naprawić margines 1px w 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>

Jeśli wyświetlić powyższy przykład na Google Chrome widać .menu wygląda mają margin-left:-1px lub margin-right:1px.

Na Firefox & IE wygląda świetnie. Jak mogę to naprawić?

Źródło

2012-03-17 Unknown Error

oto obraz, powyżej jest firefox, poniżej jest chrom. Nie widzę żadnej różnicy http://i.imgur.com/OSu9D.png –

@AndreiS tutaj jest mój Chrome .. http://i.imgur.com/W1Mhj.png mogę wiedzieć, jakiego systemu operacyjnego i wersji Chrome używasz ? –

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/

Źródło

2012-03-17 18:22:38 huhu

Pierwszy fragment tworzy spację między pełnowymiarowym tłem a pełnowymiarowymi elementami. Drugi fragment działa tylko w przypadku szerokości okien większych niż ~ 1660px. Naprawdę muszę wyrównać duży półprzezroczysty obraz tła elementu A z mniejszym elementem B, który ma półprzezroczysty kolor tła.Gdyby oba były w 100% nieprzezroczyste, po prostu zwiększyłem nieco szerokość mniejszego, tak aby pokryło wszelkie "niewłaściwie umieszczone" piksele. Plz plz plz =) – XedinUnknown

Chrome & firefox wygenerowana inaczej to lepiej, jeśli chcesz prowadzić takie same we wszystkich przeglądarce szerokość zawsze daje w NAWET wartości nie ODD. Tak, napisać tak:

.menu { 
    width:990px; 
}

Sprawdź to http://jsbin.com/oqisuv/2

AKTUALIZACJA Jeśli chcesz to dzieło doskonałe w Chrome jako można użyć to:

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

Sprawdź to http://jsbin.com/oqisuv/5/

Źródło

2012-03-17 17:49:13 sandeep

Zostanie on naprawiony na webkicie, a nie dla IE lub Firefox –

sprawdź mój przykład to działa we wszystkich przeglądarkach. – sandeep

Na FF lub IE zobaczysz 'margin-left: -1px'. Cień zniknął po lewej. –

Ustaw margines ciała na 0 ... Spróbuj tego 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; 
}

Źródło

2012-03-17 18:01:24 doitliketyler

Większość z różnymi przeglądarkami i przyszłościowe rozwiązaniem jest dołączyć tło na środku samego bloku (lub na jego środku rodzica, który ma wypełnienie poziome, aby tło było widoczne na zewnątrz jego dziecka).

Próby uzyskania idealnego dopasowania pikseli tła i bloku niezależnie od siebie (szczególnie w przypadku hacków dla określonych przeglądarek) są ślepą uliczką.

Źródło

2012-03-17 18:44:56

podobne do odpowiedzi rudsy, ale ten wydaje się lepiej pracować:

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

Źródło

2013-06-05 18:03:58

Jak naprawić margines 1px w Google Chrome?

Odpowiedz

Powiązane problemy