CSS - Rozměry bloku v MSIE

Přestože specifikace CSS jasně říká, že vlastnost width určuje šířku obsahu bloku, MS Internet Explorer to až do verze 5 dělá jinak. Podle něj je width šířka celého bloku. Takže pokud například definujete pro určitý blok

#menu {
    width: 150px;
    padding: 10px;
    margin: 5px;
}

měl by správně být celý blok (včetně výplně, okraje a rámečku) široký 180 pixelů (5+10+150+10+5). V MSIE ale bude celkově široký 150 px, což znamená, že šířka jeho obsahu klesne na 120 px. Čili blok bude vypadat v různých klientech odlišně.

MSIE 6

Aby byla situace ještě veselejší, udělali u Microsoftu z MSIE verze 6 chameleona. Jeho autoři chtěli dodržet standardy, ale na druhé straně jim bylo jasné, že za nekompatibilitu s předchozími verzemi budou uživateli ukamenováni. Proto zvolili lišácký přístup, kdy chování MSIE 6 závisí na verzi (X)HTML, v němž je stránka vytvořena.

Pokud je na stránce deklarováno HTML verze starší než 4, případně HTML 4 v přechodové či rámované verzi, nebo deklarace jazyka vůbec chybí, bude se MSIE 6 chovat jako jeho starší příbuzní (tzv. quirk mode – při pohledu do slovníku můžete přemýšlet, který z významů slova quirk měli autoři na mysli, zda vtípek, manýru nebo bizarnost). Jestliže je stránka vytvořena v přísném (strict) HTML 4 či v XHTML, bude MSIE 6 pracovat ve standardním režimu a rozměry bude interpretovat v souladu s definicí CSS.

Tohle chování vyjadřuje myšlenku, že staré stránky (ve starých verzích HTML) byly zřejmě vytvořeny pro staré verze MSIE, a proto je záhodno chovat se stejně. Stránky v moderních verzích (X)HTML pak bude nejlépe interpretovat v souladu se standardy.

Pro autora stránek toto vše bohužel představuje nemalé dilema, jak dosáhnout požadovaného vzhledu ve všech možných i nemožných klientech.

Řešení, čili matrjoška

Existuje několik způsobů, jak z této situace vybřednout. Většinou ale staví na různých chybách v interpretaci CSS a jejich použití je proto na pováženou. Asi nejbezbolestnější je metoda, kterou Petr Staníček nazývá matrjoškou.

Klíčem k ní je uvědomit si dvě skutečnosti:

pokud jsou šířky okraje, rámečku a výplně nulové, shoduje se MSIE se standardní šířkou
shodují se i v případě, že šířka má hodnotu auto a je tedy vypočítána z obsahujícího bloku

MSIE se rozejde se standardem jen v případě, kdy má šířka definovánu konkrétní hodnotu a zároveň je nenulový alespoň jeden rozměr z trojice: okraj, rámeček, výplň. Proto byste se takovým situacím měli vyhýbat.

Jestliže váš design právě takovou kompozici vyžaduje, přijde ke slovu matrjoška. Místo jednoho bloku použijete dva do sebe vnořené a definice rozložíte tak, aby bylo zachováno pravidlo z předchozího odstavce: vnějšímu definujete šířku (a ponecháte nulové ostatní rozměry), vnitřnímu definujete rozměry „obalových slupek“ a rozměr ponecháte na hodnotě auto.

Chcete-li si přečíst podrobnější popis, najdete jej přímo ve Staníčkově textu.

Příklad

Řekněme, že chcete mít na stránce menu, jež bude mít celkovou šířku 180 px, z toho 165 px bude činit vlastní obsah, po pěti pixelech bude výplň asi obou stranách a napravo ještě 5 px rámeček. Normální definice by obsahovala v XHTML kódu prvek

<div id="menu">
  ...
</div>

a v CSS pak

#menu {
    width: 165px;
    padding: 5px;
    border-right: 5px solid #4b7fa6;
}

Jenže takové menu by v MSIE starších verzí bylo užší. Proto se na stránce nahradí o chlup složitější konstrukcí

<div id="menuobal">
  <div id="menu">
    ...
  </div>
</div>

a v CSS se vlastnosti rozdělí mezi dvojici <div>:

#menuobal {
    width: 165px;
}
#menu {
    padding: 5px;
    border-right: 5px solid #4b7fa6;
}

Pravda, lehce se tu odchylujeme od ideálu oddělení obsahu od vzhledu – realizace vzhledu si vyžádala zásah do obsahu. Nicméně zásah je poměrně drobný (<div> je významově neutrální prvek), takže příliš nebolí.

zpět: rozměry bloku