Při hledání odpovědi co přesně se Internet Exploreru honí hlavou když se přepíná do Quirk módu a proč tomu tak činí jsem narazil na spoustu článků, popisující chování IE při pár konkrétních DTD, ale všude vždy 2, maximálně 3 příklady. Stejně tak, jako se všichni zabývají neustále jen Box Modelem a některé další důležité neshody opomíjí. Vytvořil jsem si proto 5 různých html dokumentů s pěti různými Doctype a zkoumal jejich chování v IE5, IE6 a IE7.

Krom vykreslení rámečku jsem testoval i dvě další vlastnosti, s jejichž odlišnou interpretací jsem se v minulosti setkal. Ve dvou dílech svých CSS tutoriálů jsem vždy popisoval řešení, jak potencionální problémy obejít, jak se jim vyhnout. Pokud ale předpovíme přesné chování Exploreru, můžeme toho i využít a viditelně si ulehčit práci.

Mějme jednoduchý stylový předpis. Když se podíváte nadiv#main, je už od pohledu jasné, že nám to bude "někde" zlobit. K testování nám dále poslouží 100 x 100 px obrázek, díky němuž hned uvidíme, jestli je div široký tak jak má být, či ne.

html { background: #e5e5e5; }
body { margin: auto; background: #fff; width: 700px; }
#main { width: 100px; height: 100px;  padding: 10px; border: 5px solid green; }
.center { margin: auto; width: 50px; }

Dále jeden z html souborů: všechny ostatní se liší pouze v DTD. Kromě Box Modelu jsem jednotlivé stránky testoval i namargin: auto;bez definicetext-align: center;pro nadřazený element a také na pevné rozměry body. Zde je kód ukázkového dokumentu:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="cs">
  <link rel="stylesheet" href="styles.css" type="text/css">
  <title>
</head>
<body>
  <img src="red.gif" alt="#">
  <div id="main"></div>
  <p class="center">test</p>
</body>
</html>

Při volbě DTD jsem zvolil se omezil pouze na pět následujících - například (x)HTML Frameset můžeme úplně pominout, jelikož tam nemají žádné boxy nikde co dělat. Stejně tak XHTML je interpretováno vždy stejně, ať už se jedná o Strict, Transitional či 1.1. Pokud definici typu dokumentu neuvedeme, nebo ji obejdeme zápisem typu<!DOCTYPE html SYSTEM>je stránka vykreslena jako HTML Transitional bez odkazu na DTD dokument.

HTML 4.01 Transitional s krátkým zápisem DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML 4.01 Transitional s odkazem na DTD soubor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

XHTML bez XML prologu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML s XML prologem:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nyní k jednotlivým verzím Internet Exploreru - nebude zde řeč ale jen o něm, při zkoumání chování jednotlivých stránek jsem narazil i na chybu u prohlížečů Opera, Firefox a Safari.

Internet Explorer 5

Pro ten se už dnes snad ani neoptimalizuje, ale pro úplnost ho uvedu. Div bude široký 100 pixelů, žádný z prvků nebude vycentrován, stejně takbodybude mít šířku 100% nikoli 700px.

Internet Explorer 6

Zde už je chování zajímavější. U stránek v HTML 4.01 Transitional s krátkým zápisem DTD nebo v XHTML s deklarací XML prologu se IE 6 přepne do Quirk módu, obsah vykreslí stejně jako IE 5, 100px široký. Padding a border se odečtou od width. U všech tří ostatních bude hlavní div široký 130 pixelů, body o šířce 700px se vycentruje stejně jako poslední odstavec.

Internet Explorer 7

Oproti předchozím verzím už je trochu klidnější, pouze u HTML 4.01 Transitional bez odkazu na DTD dokument se přepne do Quirk módu a div vykreslí 100px široký. Stejně tak nevycentruje body a zobrazí ho přes celou šířku okna.

Opera, Firefox, Safari

Dumat nad Box Modelem nemá smysl, ve všech DTD bude stránka interpretována stejně. Jedinou výjímku tvoří HTML 4.01 Strict, kde je ale problém jiný. Obrázek se bude chovat jakoby byl v odstavci, tudíž nebude přímo nalepený na div, což je častý problém hlavně u IE. Musíme proto resetovat font-size a line-height.

Testovací soubory si můžete prohlédnout zde:

xHTML 1.0 Transitional
xHTML 1.0 Transitional + XML Prolog
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Transitional full Doctype

Zip archív ke stažení: stáhnout