Coraz większa rzesza webmasterów przestaje mieć wątpliwości co do stosowania standardów. Niestety, interpretacja przez przeglądarki wciąż nie jest jednolita. Każda ma swoje “odchyły”, mniej lub bardziej znaczące. Dzisiaj omówimy najczęstsze i najpoważniejsze problemy jakich może nam przysporzyć najpopularniejszy obecnie Internet Explorer dla Windows.
W nawiasie umieszczono wersję, jakiej dotyczy dany problem bądź rowiązanie.
Szerokość warstw
Problemy (IE 4-5.x)
Jeden z najpoważniejszych w skutkach błędów, który inżynierowie z Microsoftu zaimplementowali w serii przeglądarek IE 4-5.x. Według standardów szerokość bloku liczona jest bez obramowania (border) i dopełnienia (padding), czyli np. deklarując
| width : 100px; height:60px; padding : 5px; border : 2px; |
Otrzymujemy blok, którego wewnętrzna część ma szerość 100 px, dopełnienia z wszystkich czterech stron po 5 px, a obramowanie 2 px , czyli razem cały blok na ekranie ma 114 px szerokości (100px + 2 x 5px + 2 x 2px) i 74px wysokości (60 + 2 x 5px + 2 x 2px). Tymczasem w IE ten blok na ekranie ma szerokość 100px i wysokość 60px. Jest on niczym inmym jak sumą wewnętrznej części bloku (która w tym przypadku ma rozmiar 86px na 46px), dopełnienia i obramowania. Rozwiązanie samo w sobie, trzeba przyznać, jest dość logiczne i bardziej “życiowe” niż to zaproponowane w standardach, ale czy to się komuś podoba czy nie nowych propozycji po prostu nie można wprowadzać w taki sposób. Ta nowinka w IE przysporzyła wiele dodatkowej pracy projektantom stron WWW, przynajmniej tym, którzy dbają by ich strona działała poprawnie w różnych przeglądarkach. Na szczęście w wersji 6 Explorera wszystko wróciło do normy. Niestety IE 4-5.x posiadają wciąż stosunkowo dużą część rynku (ok.15% wg. Ranking.pl – listopad 2004), więc problem wciąż jest dość istotny.
Rozwiązanie
Oczywiście nie ma problemu, gdy obramowanie i dopełnienie mają szerokość 0. W każdym innym przypadku z pomocą przychodzi tzw. sztuczka Tanteka (od nazwiska osoby, który ją wymyślił).
| width : 450px; /* wartosc dla IE 4-5.x */ voice-family : “\”}\””; voice-family : inherit; width : 400px; /* wlasciwa wartosc dla innych przegladarek */ |
Sztuczka ta wykorzystuje błąd w IE, który to powoduje przerwanie interpretacji po napotkaniu odpowiednio spreparowanego atrybutu właściwości voice-family. Po więcej odsyłam na stronę: http://tantek.com/CSS/Examples/boxmodelhack.html.
Rozmiar czcionki
Problem (IE 4-5.x)
Niestety w przeglądarkach z serii 4-5.x standardowym, normalnym rozmiarem jest small, a nie jakby to wynikało z logiki medium. Może to wywoływać niezbyt pożądane efekty, zwłaszcza, że we wszystkich innych konkurenycjnych przeglądarkach interpretacja jest poprawna.
Rozwiązanie
Zastosowanie wyżej wspomnianej sztucki Tanteka, gdzie Explorerowi podajemy zawyżony rozmiar np. medium, a wtedy dla reszty przeglądarek small.
Znaki odstępu
Problem
Znaki wcięcia oraz znaki nowej lini mogą powodować pojawianie się luk na stronie. Przykład kodu podatnego na takie działanie:
| <ul> <li>lista 1</li> <li>lista 2</li> </ul> |
Rozwiązanie
Najlepiej starać się usuwać jak najwięcej białych znaków oraz pisać “ile się da” w jednej lini, co przy okazji zmniejsza końcowy rozmiar strony. Minusem takiego postępowania jest o wiele mniejsza czytelność dokumentu dla webmastera.
Przykład:
| <ul><li>lista 1</li><li>lista 2</li></ul> |
Prolog XHTML
Problem (IE6)
Specyfikacja XHTML zaleca umieszczenie na początku strony następującego prologu :
| <?xml version=”wersja” encoding=”strona_kodowa” ?> |
Niestety IE6 może mieć problemy z wyborem odpowiedniego trybu interpretacji i w efekcie wyświetlać taką stroną niepoprawnie. Warto też wspomnieć, że inne przeglądarki po napotkaniu prologu mogą zachowywać się conajmniej dziwnie, czasami nawet się zawieszają!
Rozwiązanie
Ponieważ prolog ten nie jest obligatoryjny, więc radzę po prostu z niego zrezygnować. Potencjalne szkody z jego stosowania zdecydowanie przewyższają korzyści, których obecnie ciężko mi się dopatrzeć. Jeśli chodzi o stronę kodową to można ją zadeklarować w nagłówku HEAD poprzez znacznik META :
| <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-2″ /> |
Margin:auto i White-space: pre
Problemy
Jeśli deklaracja naszej strony nie jest ścisła to IE6 właściwości white-space: pre oraz margin:auto nie zinterpretuje poprawnie.
Rozwiązanie (IE6)
Problem rozwiązuje zadeklarowanie języka strony jako XHTML Strict.
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
Alternatywnym rozwiązaniem dla margin:auto jest umieszczenie danego elemntu w bloku div i nadanie mu stylu text-align:center.
| <div style=”text-align:center”> <div id=”glowna_czesc_strony” style=”margin:auto”> zawartość strony </div> <div> |
Przy okazji, warto pamiętać o jednostkach (px, pt, em, itp.). W trybie ścisłym wartości bez jednostek są ignorowane.
Ucinanie strony przy rozmieszczaniu za pomocą właściwości float
Problem (IE5.x-6)
Problem dość specyficzny, z którym gdy pierwszy raz się spotkałem wprawił mnie w nie lada zdziwienie. Jest on o tyle dziwaczny, że dotyczy tylko wybranej grupy użytkowników, jednak nikt (łącznie ze inżynierami z Microsoftu) nie jest w stanie stwierdzić jakiej. Ogólnie rzecz biorąc polega na sztucznym przycinaniu wysokości strony, bez względu na długość jaką rzeczywiście zajmuje. Dzieje się tak wtedy gdy layout tworzony jest przy użyciu właściwości float, a wcześniej odwiedzana strona ma wysokość mniejszą niż obecną. Jak wspomniałem powyżej nie zawsze ma to miejsce, ale zdarzyć się może. Kwestie zasadności zabezpieczania się przed tym błędem pozostawiam czytelnikowi.
Rozwiązanie
Poniższy kod wstawiony w nagłówku HEAD rozwiązuje ten problem, przynajmniej w przeglądarkach obsługujących JavaScript.
| if (document.all&&window.attachEvent) window.attachEvent(“onload”,fixWinIE); function fixWinIE() { if (document.body.scrollHeight < document.all.nazwabloku.offsetheight) { document.all.nazwabloku.style.display =’block’; } } |
Strony błędów
Problem
Czasami sami edytujemy strony błędów, najczęściej 404 (czyli w tym przypadku stronę wyświetlaną w przypadku żądania dokumentu nie istniejącego na naszym serwerze). Niestety IE ma tą dziwną przypadłość, że strony błędów mniejsze niż 512 bajtów najzwyczajniej ignoruje.
Rozwiązanie
Tworzenie stron błędów większych niż 0,5 KB 😉
Komentarze warunkowe
Na koniec jeszcze chciałbym wspomnieć o komentarzach warunkowych. Zaimplementowane począwszy od IE 5 pozwalają na detekcję wersji przeglądarki. Może się przydać gdybyśmy chcieli wyświetlić daną treść tylko i wyłącznie w IE albo którejś jego wersji (np. we wszystkich oprócz IE 6, patrz na kod poniżej).
| <!–[if lt IE 6]> To jest przegladarka z serii 5.x. <![endif]–> |
Jak widać treść jest umieszczona pomiędzy tagami komentarza, więc przez inne przeglądarki nie będzie interpretowany. Dokładnie odwrotny efekt, czyli wyświetlenie treści we wszystkich przeglądarkach oprócz IE, można uzyskać stosując tag komentarza (UWAGA! Tag ten nie jest zdefiniowany ani przez specyfikację HTML ani XHTML. To tylko kolejny wymysł nadgorliwych inżnierów Microsoftu, którzy czasami wydają się być bardziej zainteresowani tego typu nowinkami niż rzeczywistym dopracowaniem IE). Po więcej szczegółów na temat warunkowych komentarzy odsyłam do bardzo dobrego artykułu pod adresem http://www.quirksmode.org/css/condcom.html.
Literatura
Jeffrey Zeldman “Projektowanie serwisów WWW. Standardy sieciowe”, Helion 2004
