Internet Explorer box model bug.html



Powyższy obrazek demonstruje różnice pomiędzy zawartością (content; czerwoną) i ramką (border; niebieską) w modelu pudełkowym (box model).

Internet Explorer box model bug (błąd Internet Explorera w interpretacji modelu pudełkowego) jest jednym z najbardziej popularnych błędów software-owych impelmentacji 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.

edytuj Bug (błąd)

Model pudełkowy CSS opisuje wizualną prezentację elementów strony w przegląrkach 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 World Wide Web Consortium w 1996 r. i poprawioną w 1999 r., jeżeli szerokość lub wysokość elementu blokowego jest ściśle zdefiniowana, odnosi się ona do zawartośći (content), a następnie dodawane są do niej odstępy, ramka i marginesy.^[1][2]. 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.^[3]

edytuj Obejścia problemu

Internet Explorer 6 i Internet Explorer 7 nie wyświetlają tego błędu jeśli strona zawiera odpowiednią Deklarację Typu Dokumentu (DOCTYPE). Przeglądarki jednak zachowują się niepoprawnie podczas renderowania stron w trybie "quirks". Dzieje się tak w celu zachowania kompatybilności wstecznej.^[4] "Quirks mode" zostaje użyty, gdy:

• brakuje Deklaracji Typu Dokumentu lub jest ona niekompletna;
• napotkano dokument HTML 3 lub wcześniejszy;
• użyta Deklaracja Typu Dokumentu to HTML 4.0 Transitional lub Frameset, lecz identyfikator DTD nie został podany;
• przed Deklaracją Typu Dokumentu pojawi się komentarz SGML lub inny nierozpoznany ciąg znaków;
• w treści dokumentu występują błędy składniowe.

Internet Explorer 6 także używa trybu "quirks" jeśli przed sekcją DOCTYPE napotkany zostanie prolog XML^[5]

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 lub używanie komentarzy warunkowych (en:conditional comment) albo filtrów CSS (en:CSS filter) do obejścia problemu.^[6][7]

edytuj Poparcie dla modelu pudełkowego Internet Explorera

Zawodowi web designerzy Douglas Bowman i Ethan Marcotte doszli do wniosku, że model pudełkowy, reprezentowany przez Internet Explorera, wydaje się być bardziej logicznym podejściem niż rozwiązanie w specyfikacji CSS.^[8][9] Przykładem, którym posługuje się Peter-Paul Koch 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.^[10] 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).^[11] Peter-Paul Koch twierdzi, że taka idea modelu pudełkowego jest bardziej uzyteczna 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.^[12] Kolejnym argumentem "za", podanym tym razem przez Berniego Zimmermanna, 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ększosći przeglądarek.^[13]

We wczesnych szkicach CSS3 Box Model Specification i Basic User Interface Module, W3C rozważało wprowadzenie możliwości jawnego wyboru modelu pudełkowego, którego twórca zamierza użyć. Służące temu nowe właściwości noszą nazwy: box-width oraz box-height. Nie są one jednak zawarte w obecnym szkicu CSS3.

Przypisy

edytuj Linki zewnętrzne

• Tantek Çelik's opis "box model hack"
• Getting Internet Explorer to Play Well with CSS - artykuł na temat radzenia sobie z błędami IE.
• Modified Simplified Box Model Hack
• Cascading Style Sheet Compatibility in Internet Explorer 7 - artykuł MSDN, lipiec 2006.