Internet Explorer box model bug
Internet Explorer box model bug – jeden z 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”. 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.
Bug (błąd)
[edytuj | edytuj kod]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 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ści (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].
Obejścia problemu
[edytuj | edytuj kod]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 buga 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 (conditional comment) albo filtrów CSS (CSS filter) do obejścia problemu[6][7].
Poparcie dla modelu pudełkowego Internet Explorera
[edytuj | edytuj kod]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 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[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ększości 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 | edytuj kod]- ↑ Cascading Style Sheets, level 1; Håkon Wium Lie, Bert Bos; http://www.w3.org/TR/REC-CSS1-961217#formatting-model.
- ↑ Cascading Style Sheets, level 1; Håkon Wium Lie, Bert Bos; http://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model.
- ↑ CSS Enhancements in Internet Explorer 6; Lance Silver; http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3.
- ↑ Cascading Style Sheet Compatibility in Internet Explorer 7; Markus Mielke; http://msdn2.microsoft.com/en-us/library/bb250496.aspx.
- ↑ !DOCTYPE http://web.archive.org/web/20011221150001/http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/doctype.asp
- ↑ Internet Explorer and the CSS box model; Roger Johansson; http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/.
- ↑ Hack-free CSS for IE; Arve Bersvendsen; https://web.archive.org/web/20070115183512/http://virtuelvis.com/archives/2004/02/css-ie-only.
- ↑ Vorsprung durch Webstandards; Douglas Bowman; https://web.archive.org/web/20100614070042/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/.
- ↑ Vorsprung durch Webstandards; Ethan Marcotte; https://web.archive.org/web/20080211164541/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/ethan-marcotte/.
- ↑ CSS2 – Box model tweaking http://www.quirksmode.org/css/box.html.
- ↑ CSS Box Model http://www.washington.edu/webinfo/snippets/css/boxmodel.html.
- ↑ Vorsprung durch Webstandards; Peter-Paul Koch; https://web.archive.org/web/20100227061437/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/.
- ↑ Box Model Enlightenment; Bernie Zimmermann; https://web.archive.org/web/20101227135212/http://www.bernzilla.com/item.php?id=33.
Linki zewnętrzne
[edytuj | edytuj kod]- Tantek Çelik’s opis „box model hack”
- Getting Internet Explorer to Play Well with CSS. webdesign.about.com. [zarchiwizowane z tego adresu (2006-12-09)]. – artykuł na temat radzenia sobie z błędami IE.
- Modified Simplified Box Model Hack. info.com.ph. [zarchiwizowane z tego adresu (2009-05-04)].
- Cascading Style Sheet Compatibility in Internet Explorer 7 – artykuł MSDN, lipiec 2006.