Problem: Rozjazd <div> w IE8

[avant.garde]

Witam,

 

Krążę wokół rozwiązania problemu wymienionego w temacie. Otóż sprawa wygląda tak:

 

 

index.php:

 

Strona

 

Stylesheet:

html { overflow: scroll; }

body {
background: url(gfx/background.png) 0% 0% repeat;
text-align: center;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}

img {
border:0;
}

#main_container {
height: 100%;
width: 860px;
margin: 0px auto auto auto;
padding: 0px;
background-color:#ff9900;
position: relative;
}

#arrows {
background: url(gfx/arrows.png) no-repeat;
height: 151px;
width: 369px;
position: absolute;
top: 0px;
right: -2px;
}

 

Problem polega na dokładności co do piksela - strona generowana jest prawidłowo na Operze 10.60 i Firefox'ie 3.6.6, ale kontener "arrows" przesuwany jest o 2 pixele w IE8. Wygląda to tak:

 

 

 

Jak cuś to parametr "right: -2px" w kontenerze "#arrows" to tylko formalność - tak mi się przycięło, że musiałem tego div'a przesunąć by wyrównać go do tła.

 

Czy da się jakoś rozwiązać ten problem?

 

 

 

 

UPDATE #1

Problem udało mi się rozwiązać za pomocą hack'a do IE - a mianowicie komentarza odczytywanego tylko przez IE:

 

 

Jeśli warunek jest prawdziwy, to przekierowuje do innego stylesheetu, dostosowanego do IE. Innymi słowy mamy po prostu dwa różne arkusze stylów, jeden ogólny i domyślnie ustawiony w head'zie, drugi odpalany poprzez skrypt komentarza IE (inne przeglądarki czytają ten skrypt jako zwykły komentarz) - w razie spełnienia warunku (czyli w tym wypadku jeśli browser to IE), nadpisze style tymi, z nowego arkusza.

 

Jednak inny problem się pojawił, zauważyłem, że mdz. Operą a Firefoxem też jest rozjazd - i tutaj zgłupiałem, bo zapisałem ten obrazek bez kompresji w bmp (żeby uniknąć jakiś wypaczeń na krawędziach), ale w zależności ile razy powiększę stronę w przeglądarce, tak też linie się pokrywają albo rozłażą. Jak rozbiję wszystko na kolorowe kontenery testowe, to nie widzę żadnych rozsunięć czy marginesów - wszystko wydaje się albo błędem renderu przegladarki, albo złudzeniem optycznym;P

 

 

 

 

UPDATE #2

Okej, problem jednak nie jest złudzeniem optycznym. Przede wszystkim, tak jak podejrzewałem, nie ma co skalować i powiększać sobie strony, by się jej przyjrzeć - występuje wtedy przekłamanie związane z algorytmami przeskalowywana - analogiczne zjawisko jak w Szopie, jeśli ustawimy powiększenie inne niż wielokrotność 2 (np. 33% - choć zjawisko mocno zniwelowane w wersjach CS4).

 

Meritum problemu jest błąd Firefox'a (występujący również w Chrome i Safari), który to przesuwa tło strony o 1 piksel. Całość w raz z obejściem opisana jest: TUTAJ. Mam nadzieję, że mój długaśny 'risercz' przyda się komuś z podobnym problemem.

 

Pozdrawiam.

Edytowane 15 Lipiec 2010 przez avant.garde

[kots]

Zamiast zabawy w hacki i jednopikselowe przesunięcia, sugeruję Ci użyć przezroczystego png. I po problemie.

[avant.garde]

Faktycznie, to chyba najrozsądniejsze rozwiązanie:)

[avant.garde]

Pardon, że postem pod post rzucam, ale natrafiłem na rzecz niebywałą, której pojąć nie do końca potrafię. Odświeżam problem, bo powrócił on dość niedawno, jak sprawdziłem stronę na starszym laptopie.

 

Stronka to: http://foolsgarden.ovh.org/Portfolio_resized/

 

Sprawa wygląda tak, że na mojej maszynie (1680x1050 PVA) strona na wszystkich przeglądarkach w widoku 100% wygląda poprawnie - segmenty łączą się ze sobą (centralny kontener dopasowuje się liniami do tła). Jeśli powiększyć stronę kilkukrotnie, to zaobserwować można, że linie nie pokrywają się (dokładniej występuje przesunięcie o dwa piksele).

 

 

Nie zaobserwowałbym całej sprawy gdyby nie przypadkowe zerknięcie na starszego lapta (1024x768, starsza jaskrawa matryca TN) - co wprawiło mnie w niezłe zdumienie, a mianowicie strona od razu widać, że jest rozjechana, co nadal jest widoczne po powiększeniu (nierówność dookoła głównego kontenera).

 

 

I tutaj pojawia się cały szkopuł - bo naturalną rzeczą, jaką by można zrobić, to poprawić przesunięcie skoro "na powiększeniu" oraz "ostrej" matrycy wychodzi mankament. Poprawiłem. I na laptopie wszystko jest okej (w naturalnym widoku 100% oraz powiększonym), a na moim monitorze z kolei pojawia się rozjazd o te dwa piksele. Następnie jak powiększam kilkukrotnie, to widać, że jednak jest równo.

 

 

W tym momencie kompletnie zgłupiałem, bo wychodzi na to, że na jednych monitorach strona jest przesunięta, na innych jest poprawnie - jeśli poprawię na jednym to na drugim się krzaczy. Nie jest to kwestia kompresji obrazków, bo sprawdzałem również wariant na nieskompresowanym bmp. Co więcej ominąłbym problem idąc w przeźroczystość, ale niestety elementu ramki głównego kontenera nie jestem w stanie zaimplementować do png bo oparty jest o blending pass through.

[torm]

ja bym zrobił tak jak poprzednim razem... tło wrzóć w całości... a cień daj na przeźroczystym *.png

 

poza tym cholernie wolno Ci się ładują obrazki w portfolio...

Edytowane 24 Sierpień 2010 przez torm

[avant.garde]

Właśnie myślałem nad takim rozwiązaniem - nic lepszego nie przychodzi mi do głowy. Choć z drugiej strony szalenie ciekawi mnie geneza tego problemu;P

 

Co do obrazków to fakt - nie dość, że nie kompresowałem ich wcale, to na dodatek serwer strasznie muli - muszę poważnie pomyśleć o jakimś płatnym hostingu (no i jasna sprawa choć odrobinę skompresować;) ).