Přeskočit hlavičku [accesskey=1]
Objasnění box-modelu
Nacházíte se zde: Novinky » Články » Objasnění box-modelu
Jak se počítá šířka prvků
Podle specifikace CSS 2.1 se do prvku width
započítává pouze šířka obsahu, vše
ostatní (vnitřní okraje, orámování) se k této šířce přičítá. Internet Explorer však obsahuje
nepříjemnou implementační chybu — width
bere jako šířku celkovou
a okraje i orámování od ní odčítá. Pracně vybudované CSS layouty se pak při zobrazení
v jiném prohlížeči „rozsypávají“ (obvykle se pravý panel posune pod levý apod.).
Názorný příklad
Máme tabulku širokou 250px (width:250px
), s vnitřními okraji 15px (padding:15px
),
orámovanou 10px okrajem (border-width:10px
):
div { padding: 15px; border: 10px solid #000; width: 250px }
Explorer je špatný počtář
Mozilla i Opera vypočítají šířku správně: 250 + 15 + 15 + 10 + 10 = 300px
.
Pro obsah zůstalo zachováno zadaných 250px. Tento postup se nazývá „content-box-model“ (překl.
obsahový model). Internet Explorer však počítá naopak: 250 - 15 - 15 - 10 - 10 = 200px
,
na obsah zde zbylo pouze 200px. Chybný postup se nazývá „border-box-model“ (překl. rámcový model).
Rozdíl šířky obsahu tedy činí 50px.
Podívejte se na příklad, který jsem právě popsal. Zkuste si jej prohlédnout s Mozillou (nebo novější Operou) a Internet Explorerem — uvidíte zmíněný rozdíl.
Možnosti řešení
Tantek Çelikův box-model hack
Snaživí tvůrci přinesli celou řadu řešení. Nejznámější je tzv. Tantek Çelikův hack (pojmenovaný podle autora), určený pro Win/IE 4.0/5.0/5.5 a Win/NN 4.0. Správně funguje v dokumentech HTML 4.01 (Strict, Transitional a Frameset).
Podívejte se na příklad funkčnosti Tantekova hacku v HTML 4.01 Strict.
div { padding: 15px; border: 10px solid #000; width: 300px; /* border-box-model */ voice-family: "\"}\""; voice-family: inherit; width: 250px; } html>body div { width: 250px; /* content-box-model */ }
Módy prohlížečů
Novější verze prohlížečů (IE 6.0, Mozilla 1.4, Opera 7) mají v sobě implementovány dva módy, podle nichž dokumenty zpracovávají:
- Standardní mód — prohlížeč pracuje podle předepsaných standardů (nebo se o to alespoň snaží), box-model je zde počítán správně.
- „Quirk“ mód — prohlížeč simuluje nedokonalosti starších verzí prohlížečů, aby tak nenarušil vzhled stránek. Je zde z důvodu zpětné kompatibility. Box-model se zde počítá většinou chybně (v případe IE rozhodně).
Který mód použít?
Prohlížeč se rozhodne podle použitého DOCTYPE
. Pro staré specifikace (HTML 3.2, HTML 4.0, až po HTML 4.01 Transitional)
použije „quirk“. Pro novější standardní mód. Podrobněji popisuje Petr Staníček:
HTML/CSS - DOCTYPE a módy prohlížečů,
nebo Eric Meyer: DOCTYPE grid
(anglicky).
Nepochopitelná „bota“ v IE 6.0
Çelikův hack lze použít i pro XHTML, ale pouze v prohlížečích IE 5.0 a 5.5. Ve verzi 6.0 totiž nastává nepochopitelná „bota“:
XHTML musí obsahovat ještě před samotným DOCTYPE
XML deklaraci: <?xml version="1.0" encoding="…"?>
.
To je kámen úrazu. Právě tento zápis přepne Win/IE 6.0 do „quirk“ módu,
kde použije špatný box-model.
Údajně totéž dělá i Opera 7.02.
Lepší řešení
Pixyho „matrjoška“
V článku O šířce prvku, Exploreru, Mozille a matrjošce (Pixylophone, 26.8.2003) popsal Petr Staníček tzv. „matrjoška hack“. V pravém slova smyslu se však o hack nejedná, nevyužívá totiž chyby v prohlížeči. Tento postup bych Vám doporučil — sám jej používám téměř všude. Doplním jen příklad:
#matrjoska-null { width: 300px; border: none; padding: 0; } #matrjoska { padding: 15px; border: 10px solid #000; background-color: #ff0; } <div id="matrjoska-null"> <div id="matrjoska"> … </div> </div>
Selektor potomka
Jedná se o hack, velice podobný tomu od Tanteka. Využívá toho, že IE
nezná tzv. „child“ (překl. potomek) selektor "›".
Z toho důvodu nepochopí zápis html>body #child
.
Bez problémů lze použít v XHTML. Podívejte se na příklad.
#child { padding: 15px; border: 10px solid #000; background-color: #ff0; width: 300px } html>body #child { width: 250px } <div id="child"> … </div>
Simplified Box Model Hack
Autorem hacku je Holly Bergevin. Podívejte se na příklad.
#sbmh { padding: 15px; border: 10px solid #000; background-color: #ff0; width: 250px } * html #sbmh { width: 250px; w\idth: 300px; } <div id="sbmh"> … </div>
Závěr
Toto je jen malý výčet způsobů, jak se s chybným výpočtem šířky boxu vypořádat.
Vybral jsem ty postupy, které považuji za jednoduché a dobře použitelné, řešení je však
celá řada — např. funkce expressions()
, funkční v Internet Exploreru.
Stačí se jen porozhlédnout po vyhledávačích.
Shrnující příklady:
- Objasnění box-modelu
- Objasnění box-modelu: XHTML, neošetřené
- Objasnění box-modelu: HTML 4.01 Strict, Tantekův hack
Relevantní odkazy:
- Schováváme CSS před prohlížeči (Martin Snížek, Interval, 30.1.2003)
Vloženo: 1.1.2004