Chybná interpretace vlastnosti width v Internet Exploreru

    1

    Pokud občas používáte na svých stránkách kaskádové styly, určitě jste narazili, anebo teprve narazíte na problém, kdy dnešní nejrozšířenější prohlížeč od Microsoftu špatně interpretuje vlastnost width v definici boxu. Tento článek vám poradí, jak tuto špatnou interpretaci „obejít“.

    Problém s vlastností width, která podle specifikace CSS width vyjadřuje šířku vlastního obsahu boxu (width) je docela znám, nicméně ne každý má čas studovat dopodrobna CSS specifikaci na W3.org a k tomu ještě hleda třeba v MSDN od Microsoftu, kde se o daném problému také píše. Problém je prostě v tom, že Internet Explorer interpretuje vlastnost width jako šířku obsahu společně s padding (odsazení obsahu od okraje boxu) a border (orámování boxu), což je špatně. Podle CSS se totiž výsledná velikost boxu počítá jako součet width, padding, border a margin. V Internet Exploreru se výsledná velikost boxu počítá pouze podle width a margin. Padding a border jsou totiž už „obsaženy“ ve width.

    Na začátek si ještě upřesníme pojmy content (obsah – width), padding, border a margin.

    Box

    A hned si náš problém ukážeme na jednoduchém příkladě. Máme tuto korektní definici boxu:

    <style type=“text/css“>
    .hlavni {
       width: 200px;
       height: 200px;
       border: 20px solid black;
       padding: 30px;
    margin:0px;
       background-color: #ffffcc;
    }
    </style>
    <div class=“hlavni“>Obsah boxu</div>

    Podle specifikace CSS by tedy měl být prostor pro obsah (content) 200×200 pixelů a celkový rozměr boxu by měl činit 300 pixelů (0+20+30+200+30+20+0). V Internet Exploreru je ovšem prostor pro obsah pouze 100 pixelů a celkový rozměr boxu je pouze 200 pixelů. Hodnoty vlastnosti padding a border se totiž odečítají od hodnoty zadané ve width místo toho, aby se správně přičítaly. A takto náš box vypadá v Internet Exploreru 5:

    Výsledný box v IE 5.0

    A takto má vypadat přesně podle CSS:

    Správné rozměry podle CSS

    Je to prostě opravdu nepříjemná chyba, zvláště když potřebuje mít u jednotlivých boxů přesné rozměry ve všech odpovídajících prohlížečích, ale řešení není naštěstí nikterak složité a spočívá ve vnoření dvou boxů do sebe, kde bude rozměr width (a také height) ve vnořeném boxu stejný, jako je rozměr width (a height) u nadřaženého boxu:

    <style type=“text/css“>
    .hlavni {
       width: 200px;
       height: 200px;
       border: 20px solid black;
       padding: 30px;
      margin:0px;
       background-color: #ffffcc;
    }
    .vnoreny {
       width: 200px;
       height: 200px;
    }
    </style>
    <div class=“hlavni“><div class=“vnoreny“>Obsah boxu</div></div>

    Internet Explorer (ale i jiné prohlížeče) prostě bere při stanovení rozměrů poslední zadanou hodnotu, takže, když je v nadřazeném boxu zadáno width:200px a vlastnost padding a border zde prostor pro obsah (content) zmenší o polovinu na 100px, tak se tento prostor pomocí vnořeného divu a definicí width:200px opět zvětší. Je to prostě konfiktní nastavení. Dalším postupem, jak dosáhnout stejné velikosti obsahu v boxu je ten, že se použije náš starý známý obrázek invisible.gif o požadovaném rozměru (200px), který prostor pro obsah prostě „natvrdo“ natáhne – to ostatně dělá i výše uvedený styl, jenom je místo neviditelného obrázku použit další box.

    A pokud potřebujete mít pro box pouze stejnou šířku (nikoli výšku) v prohlížečích, můžete také použít tento styl:

    <style type=“text/css“>
    .hlavni {
      width: 300px;
    }
    .vnoreny {
      background-color: #ffffcc;
      padding: 30px;
      border: 20px solid black;
    }
    </style>
    <div class=“hlavni“><div class=“vnoreny“>Obsah boxu</div></div>

    Tento styl funguje tak, že se vytvoří „hlavní“ box o šířce 300px. Do něj se vnoří další box, který již nemá width definován (prohlížeče tedy použijí width:auto;), ale má definován příslušný padding a border. Výsledkem je stejná velikost pro obsah (content) jak v Internet Exploreru, tak i v Mozille. Vnořený box v Internet Explorer totiž má šířku 300px a pomocí padding a border se prostor pro obsah zmenší na 200px. V Mozille je to naopak, zde má vnořený box „přímo“ šířku 200px a vlastnosti padding a border se přičtou k tomuto rozměru, respektive první se sečte padding a border a to co zbyde, je prostor pro content.

    Je prostě na vás, který styl použijete, první vám umožňuje definovat i správnou šířku boxu height, druhý styl pouze jenom width, nicméně se mi zdá trošišku korektnější.

    A závěrem – vlastnost width je správně interpretována v Netscape 6, Mozille, Opeře 5 a částečně v Internet Exploreru 6 (podle typu dokumentu). Naopak špatně je interpretována v Internet Exploreru 6 (podle typu dokumentu) a také v nižších verzích tohoto prohlížeče. Takže stačí počkat, až se pořádně rozšíří Explorer 6 a výše popsané řešení nebude potřeba používat :)

    Přeji vám hezký den.

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

    1 Příspěvěk v diskuzi

    Odpovědět