Firefox 3, Opera 9, Safari a kupodivu již i Explorer 7 a 8 používají vždy standardní zobrazovací režim. Internet Explorer 6 však používá
dva zobrazovací režimy - standardní a tzv. "quirk" nestandardní. Mezi těmito režimy se automaticky přepíná podle
(ne)uvedení DOCTYPE a xml deklarace. V quirk módu se jinak počítají rozměry blokových elementů - Explorer 6
interpretuje šířku elementu chybně jako celek, tedy včetně orámování (border) a vnitřního okraje
(padding), naopak Firefox, Opera a Explorer 7 chápou šířku elementu správně jen jako šířku jeho obsahu.
Dále se v quirk módu Exploreru 6 chybně zobrazují rozměry řádkových (inline) elementů, neměly by se zobrazovat vůbec a velikost písma je o stupeň větší.
Je-li tedy v dokumentu uvedena xml deklarace
<?xml version="1.0" encoding="windows-1250"?>,
je Internet Explorer 6 vždy přepnut
do quirk módu.
Nestandardní, ale funkční řešení nabízí tzv. CSS hack (viz níže).
Standardním řešením je neuvedení xml deklarace, to je ale možné pouze s použitým kódováním utf-8 v hlavičce webu:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
S běžnějším kódováním windows-1250 je nutné xml deklaraci uvést, jinak není kód dokumentu validní.
Není-li v kódu uvedena jakákoliv definice typu dokumentu DTD (např. typu Transitional nebo Strict)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,
je rovněž Internet Explorer 6 přepnut do quirk módu.
Ve standardním módu (tento příklad) tedy zobrazuje Explorer 6 pouze dokumenty s DTD a bez xml deklarace, řádek
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">,
musí být totiž v kódu na začátku.
Shrnutí: pokud tedy použijeme XHTML validní kód pro hlavičku webu:
<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,
přepne se Explorer 6 do quirk módu a musíme tedy počítat s tím, že bez CSS hacku (viz níže) budou rozměry blokových prvků jiné.
Explorer 7, 8, Firefox 3, Safari a Opera 9 vždy stránky zobrazují ve standardním módu.
<div style="border: 20px solid red; width: 200px">
<div> s nastaveným orámováním a šířkou. Rámeček (border) se do šířky správně nepočítá a objekt má všude stejnou šířku.
Nejčastějším řešením problému quirk módu IE6 (první červený objekt je v něm výrazně užší) je tzv. CSS hack, kdy zápis width: 200px je určen pro standardní režim a
width: "240px" (resp. _width: 240px) pro IE6 v quirk módu, který je naštěstí schopen tento syntakticky nesprávný zápis rozeznat a především preferovat.
V hacku přičteme šířku levého a pravého rámečku a umístíme ho za standardní deklaraci šířky, obráceně to nefunguje! IE6 ve standardním
módu, IE7, IE8, Firefox, Safari i Opera ale CSS hack nevidí a oba červené objekty jsou správně stejně široké 200px (tento příklad).
div { border: 20px solid red; width: 200px; width: "240px" }
<div> s nastaveným orámováním a šířkou pomocí CSS hacku, v quirk módu IE6 je tento objekt stejně široký jako v ostatních prohlížečích.
<span style="width: 300px; height: 50px; border: 1px solid red">
<span> s nastavenou velikostí,
rozměry jsou správně ignorovány, protože se jedná o řádkový element.
<span style="font-size: small">
Text velikosti small je menší než standardní písmo (v quirk módu IE6 nikoliv).
(X)HTML element <small> ale paradoxně funguje i v quirk módu IE6 dobře:
Text velikosti small je menší než standardní písmo.
:: Testování nestandardního zobrazovacího (quirk) módu IE6
pepe © 2006