Různý box model

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:

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)