Internet Explorer box model bug
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[1]. "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[2]
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 (conditional comment) albo filtrów CSS (CSS filter) do obejścia problemu[3][4].
- ↑ Cascading Style Sheet Compatibility in Internet Explorer 7; Markus Mielke; http://msdn2.microsoft.com/en-us/library/bb250496.aspx
- ↑ !DOCTYPE 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; http://virtuelvis.com/archives/2004/02/css-ie-only