mozilla
Your Search Results

    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:

    <center>

    Interpretace box modelu v prohlížečích. Obrázek převzat z MSDN.

    </center>

    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


    Informace o původním dokumentu

    • Autor: Josef Kotva

    Document Tags and Contributors

    Contributors to this page: Sheppy, Triceo, Foxik, Majda
    Last updated by: Foxik,