Mýty a pověry okolo Box Modelu

 |  HTML, CSS, JavaScript  |  2 438x
Mýty a pověry okolo Box Modelu

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 na div#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 na margin: auto; bez definice text-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ě tak body bude 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

Facebook Twitter Google+

Komentáře k článku "Mýty a pověry okolo Box Modelu"

Gravatar
Péťa 28. 5 2008, 23:39
1/4 Středa 28. Května 2008, 23:39  |  Opera, Linux

Čau majku,
nevím jestli je to úmysl či chyba, zda jsi i zdrojové kódy psal ručně či opisoval ale u #main máš

#main { ... 10padding:px; ... }

, tak nevím jestli chyba nebo úmysl, každopádně zajimavý článek :)

Gravatar
Mike 28. 5 2008, 23:58
2/4 Středa 28. Května 2008, 23:58  |  Opera, Windows XP

[1] Péťa: to je tak, když si to člověk po sobě ani pořádně nepřečte %1 článek byl napsaný už dlouho do předu, čekal jen na finální úpravy a publikování... díky, opraveno.

Gravatar
Péťa 29. 5 2008, 13:26
3/4 Čtvrtek 29. Května 2008, 13:26  |  Opera, Linux

ještě si mohl vyzkoušet XHTML 1.1 :) abych věděl jaké hrůzy mě čekají :-D

Gravatar
Mike 29. 5 2008, 15:21
4/4 Čtvrtek 29. Května 2008, 15:21  |  Opera, Windows XP

neboj, žádné hrůzy %0 XHTML 1.1 se chová stejně jako 1.0 Strict či Transitional (jde pouze o uvedení / neuvedení XML prologu)

předpokládám samozřejmě zasílání jako text/html, protože při application/xhtml+xml ti to IE nesežere vůbec... a zasílat XHTML jako text/xml jsem nezkoušel (což by IE vzalo), ale toto už bych vůbec neřešil %5

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua