Rozdílná implementace tzv.box modelu v moderních prohlížečích a v MSIE je jednou z nejčastějších příčin chybného zobrazení stránek. Většinou se projeví jinými rozměry bloků, může však také vést k rozsypání stránky. Box model určuje, jakým způsobem mají být počítány rozměry bloku. Vysvětlíme si to na následujícím příkladu:
Zatímco podle standardu je šířka bloku určena pouze šířkou jeho obsahu, některé verze MSIE do šířky bloku navíc chybně přičítají šířku rámečku a odsazení. Obdobné platí i pro výšku bloku.
Mějme tedy následující definici:
CSS:
#box { margin: 20px; padding: 10px; border: 5px; width: 300px; }
Skutečné rozměry definovaného bloku budou vypadat takto:
Prohlížeč | Šířka obsahu | Šířka bloku |
---|---|---|
Moderní prohlížeče | 300px | 370px (300+2*10+2*5+2*20) |
MSIE | 270px (300-2*5-2*10) |
340px (300+2*20) |
Pozn.: Analogický postup platí pro výpočet výšky.
Řešení se nabízejí v zásadě dvě. Můžeme bloku nadefinovat dvě šířky (např. pomocípodtržítkového hacku nebo selektorů) nebo využít tzv.matrjošku, jejímž autorem je Petr Staníček aka pixy).
Podtržítkový hack
CSS:
#box { margin: 20px; padding: 10px; border: 5px; width: 300px; _width: 340px; /* Do definice doplníme rozměr celého bloku, jak jej počítá MSIE */ }
Selektory
CSS:
#box { margin: 20px; padding: 10px; border: 5px; width: 340px; /* Tuto šířku zpracují všechny prohlížeče */ } div[id=box] { width: 300px !important; /* Šířka pro moderní prohlížeče, MSIE bude tento zápis ignorovat */ }
Pozor! Selektor má nižší prioritu než přímá definice pro identifikátor, proto by tento zápis selektoru neměl účinek. Hodnoty uvedené v identifikátoru mají větší váhu než hodnoty v selektoru, které by tak nebyly použity. K dané hodnotě v selektoru je tedy nutné doplnit pravidlo !important
, čímž zajistíme absolutní platnost hodnot v selektoru.
Ale pozor - vícenásobným použitím jednoho id nemůžete získat xml validní dokument!
Matrjoška
Matrjoška obchází chybnou interpretaci box modelu v MSIE tím, že vnějšímu bloku nastaví rozměr a vnitřnímu výplň a rámeček. MSIE tak nemůže chybně sečíst rozměr a výplň.
HTML:
<div class="box-obal"><div class="box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div></div>
CSS:
div.box-obal { width: 300px; margin: 20px; padding: 0; border: 0; } div.box { padding: 10px; border: 5px; }
Související odkazy
- Box model (w3.org)
- O šířce prvku, Exploreru, Mozille a matrjošce (pixy.cz)
- Weby s chybou box-model (Technická evangelizace)
Informace o původním dokumentu
- Autor: Josef Kotva