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:

Relevantní odkazy:

Vloženo: 1.1.2004


Copyright © 2004 Vít Dlouhý, Všechna práva vyhrazena ®
XHTML 1.1, CSS 2.1, Dogma W4