Tomasz Marszał BlogWebDevelopment. Informatyka. Ciekawe projekty.

W drugim odcinku, zgodnie z zapowiedzią, przygotowałem test porównawczy pozycjonowania kwadratu o określonej szerokości (100px) na środku strony za pomocą trzech metod:

• jako tło strony z parametrem background-position:center;
• z wykorzystaniem position:absolute;left:50%;margin-left:-50px;
• z wykorzystaniem margin-left:auto;margin-right:auto;

Podobnie jak w poprzednim odcinku, przygotowałem stronę testową. Zgodnie z intuicją wszystkie trzy kwadraty powinny ułożyć się jeden nad drugim i dać jeden prostokąt o wymiarach 100×300px.

Firefox 3.5, Opera, IE8

Powyższe trzy przeglądarki wyświetliły wszystko zgodnie z przewidywaniami: kwadraty jeden pod drugim, równo i bez problemów. Miłą niespodzianką było to, że Internet Explorer 8 wyświetlił wszystko poprawnie. W tych trzech przeglądarkach pozycja wyśrodkowanego tła i wyśrodkowanych elementów przekształcana jest do liczby całkowitej jednym sposobem (w FF3.5 przez zaokrąglenie, w Operze i IE8 – przez obcięcie części ułamkowej).

Firefox 3.0, IE7

Zaskoczeniem okazał się Firefox 3.0, który wyświetla wyśrodkowane tło przesunięte o 1px w lewo w stosunku do pozostałych kwadratów. Związane jest to z tym, że pozycja tła w jest wyliczana przez obcięcie części ułamkowej, a pozycja elementu na stronie – przez zaokrąglenie. Oczywiście przesunięcie występuje tylko wtedy, kiedy szerokość okna przeglądarki (bez elementów interfejsu: paska przewijania, brzegów okna) jest liczbą nieparzystą.

Safari, Chrome

W przeglądarkach na silniku webkit występuje odwrotny problem niż w FF3.0 i IE7 – pozycja tła tworzona jest przez zaokrąglenie, a pozostałych elementów przez obcięcie, co przy nieparzystej szerokości strony tworzy przesunięcie tła o 1px w prawo.

IE6

Ta przeglądarka jest, oczywiście, klasą samą w sobie. Dla tła w ogóle nie działa automatyczne wyśrodkowanie przez co nie znalazło się ono na screenie (wyświetlone było w lewym górnym rogu strony testowej), z kolei element wyśrodkowany przez position:absolute został ustawiony przez zaokrąglenie, a przez margin:auto – przez obcięcie.

Rozwiązanie

Tutaj, niestety, nie ma optymistycznych wieści. Wprawdzie można mieć nadzieję na nową wersję webkita, która naprawi problem w Safari i Chrome, a także na wyjście z użycia IE6, IE7 i FF3.0, ale trzeba założyć, że nie nastąpi to szybko. Jedynym sensownym rozwiązaniem wydaje się omijanie tego problemu i umieszczanie wyśrodkowanego tła strony tylko wtedy, gdy nie szkodzi nam jednopikselowe przesunięcie w jedną lub drugą stronę, a także wyśrodkowywanie elementów na stronie przy użyciu tylko jednej, wybranej metody.