A | A | A

BŁĘDY PRZEGLĄDAREK

Internet Explorer box model bug

Błąd Internet Explorera w interpretacji modelu pudełkowego jest jednym z najbardziej popularnych błędów software-owych implementacji kaskadowych arkuszy stylów CSS. Błędem dotknięte są przeglądarki Microsoft Internet Explorer dla Windows aż do wersji 6, oficjalnie obsługujące style CSS. Internet Explorer 6 i Internet Explorer 7 nie generują błędu podczas renderowania stron w trybie "standards". Niestety błąd nadal występuje w "quirks mode". Problem nie dotyczył przeglądarki Internet Explorer dla komputerów Apple Macintosh, jednak przestała być ona rozwijana w 2003 roku.

Model pudełkowy CSS opisuje wizualną prezentację elementów strony w przeglądarkach graficznych. Model pudełkowy precyzuje graficzną strukturę elementów blokowych, takich jak p lub blockquote, na którą składają się zawartość (content), odstępy (padding), ramka (border) i marginesy (margins). Zgodnie ze specyfikacją CSS1, wydaną przez W3C w 1996 r. i poprawioną w 1999 r., jeżeli szerokość lub wysokość elementu blokowego jest ściśle zdefiniowana, odnosi się ona do zawartości (content), a następnie dodawane są do niej odstępy, ramka i marginesy. Internet Explorer 5 niepoprawnie ustala szerokość lub wysokość elementu włączając w obliczenia odstępy i ramkę. Skutkuje to węższymi lub niższymi obiektami na stronie.

Box model bug w Internet Explorer

Poparcie dla modelu pudełkowego Internet Explorera

Zawodowi web designerzy doszli do wniosku, że model pudełkowy, reprezentowany przez Internet Explorera, wydaje się być bardziej logicznym podejściem niż rozwiązanie w specyfikacji CSS. Przykładem, którym można się posłużyć jest fizyczne, rzeczywiste pudełko, którego wymiary zawsze odnoszą się do samego pudełka z ewentualnymi odstępami, ale nigdy do samej jego zawartości. Takie podejście pozwala na używanie wymiarów względnych pudełka i sztywno ustawionych odstępów zarazem, co nie jest możliwe w modelu przyjętym przez W3C (bez użycia trików). Idea modelu pudełkowego jest bardziej użyteczna dla grafików, którzy projektują layouty bazując raczej na widocznych na ekranie szerokościach poszczególnych bloków, a nie na domniemanej szerokości ich przyszłej zawartości. Kolejnym argumentem "za" jest fakt podobieństwa tej idei do idei działania wymiarów i odstępów komórek w tabelach HTML. Sposób wyświetlania komórek został zawarty w specyfikacji W3C i zaimplementowany w większości przeglądarek.

Obejście problemu

Wymyślono wiele różnych trików, wymuszających na Internet Explorerze 5 poprawne wyświetlanie stron. Triki te wykorzystują głównie błędy obsługi selektora CSS zaimplementowanego w Internet Explorerze i polegają na ukrywaniu części kodu przed przeglądarką. Najbardziej popularnym trikiem jest "box model hack" stworzony przez Tanteka Çelika. Çelik wpadł na pomysł napisania pomocnego kodu, podczas pracy nad Internet Explorerem dla komputerów Macintosh w firmie Microsoft, której ten problem nie dotyczy. Rozwiązanie polega na zdefiniowaniu szerokości elementu dla przeglądarki Internet Explorer pod Windows, a następnie nadpisaniu jej kolejną definicją szerokości dla przeglądarek poprawnie obsługujących CSS. Ta druga deklaracja jest ukryta przed Internet Explorerem pod Windows, dzięki wykorzystaniu bug-a w parserze reguł CSS. Sens implementacji tego rozwiązania w kolejnych projektach został podważony z uwagi na powstanie Internet Explorera 7, w którym poprawiono niektóre błędy.

Wykorzystywanie podobnych haków (hacks) nie jest wskazane, gdyż opierają się one na błędach implementacji CSS w przeglądarkach, które w przyszłości prawdopodobnie zostaną usunięte. Z tego powodu, niektórzy web developerzy rekomendowali unikanie jednoczesnego definiowania szerokości i odstępów w danym elemencie.

Błąd podwójnego marginesu

Jeden z najdziwniejszych błędów Internet Explorera jest błąd podwójnego marginesu . Przeglądarki IE wcześniejsze niż wersja 7 podwajają wielkość marginesu między elementem który ma nadany float a krawędzią bloku w którym jest zawarty. Bug ten ma miejsce tylko w przypadku gdy float i margines mają ten sam kierunek. Czyli float: left; i margin-left: XXpx; oraz float: right; i margin-right: XXpx;

Ilustracja błędu podwójnego marginesu
Ilustracja błędu podwójnego marginesu

Bug ten jest symetryczny, działa tak samo w prawą jak i lewą stronę. Bug ma miejsce tylko w przypadku pierwszego elementu w wierszu, każdy następny element umieszczony obok wyświetlany byłby poprawnie.

Rozwiązanie problemu

Na szczęście rozwiązanie problemu jest bardzo proste. Do deklaracji CSS należy dodać display: inline; - to naprawia błąd i margines wraca do normy. Na rozwiązanie to jako pierwszy wpadł Steve Clason. Nadanie elementowi wyświetlania inline naprawia błąd lecz deklaracja ta jest poniekąd ignorowana gdyż każdy element, któremu nadany jest float staje się automatycznie elementem blokowym więc nie zmienia to sposobu prezentacji.

Bugów przeglądarek jest oczywiście o wiele więcej i z pewnością każdy web developer prędzej czy później się na nie natknie. Dla większości z nich są rozwiązania w postaci hacków lecz czy warto je stosować? Jakie istnieją niebezpieczeństwa?


Skocz do góry strony ↑