Skrytá zákoutí CSS - box model

CSS 2.0 má pár zákoutí, o kterých část webdesignerů, zejména ti začínající, nevědí. Proto se je zde pokusím přiblížit.

První základní vědomost je znalost box-modelu. Zejména jeho IE verze a verze podle specifikací(Opera, FF,atd.). IE totiž obsahuje vlastní box-model, který nevyhovuje specifikaci W3C. Když zobrazuje nějaký blokový prvek, tak za jeho celkovou šířku dosadí hodnotu width a za jeho celkovou výšku dosadí height. To tedy znamená, že vlastní obsah prvku (text) má rozměry zmenšené o hodnoty padding a border. Oproti tomu ostatní prohlížeče dosazují za celkovou šířku součet hodnot width+border+padding a za celkovou výšku součet height+border+padding. Což je korektní postup. Proto se v IE zobrazují prvky menší než v ostatních browserech.

Chybný box-model ale IE nepoužívá vždy. Při vývoji IE 6 totiž Microsoft pochopil, že si nemůže dělat úplně co chce, a doplnil do produktu také správný box-model. IE 6 tedy používá oba modely. Přepíná mezi nimi podle validity doctype deklarace(stejně tak Opera 8).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
Tato DTD jsou validní a proto IE 6 zvolí správný W3C box-model (standardní režim).

Další zvláštnost IE 6: Pokud DTD není úlně na začátku dokumentu, IE zvolí chybný MSIE box-model. To platí i pro XML deklaraci.

Opera 8 má v sobě také zakomponováno přepínání mezi box-modely. Narozdíl od IE ale doctype deklarace na začátku dokumentu nezpůsobí přepnutí do nestandadtního režimu.

Celkový souhrn:

BrowserBox-modelPřepínání modelůAkceptuje XML deklaraci
IE 5 a staršíNESTAND.nene
IE 5.5 a staršíNESTAND./STAND.anone
IE 6NESTAND./STAND.anone
Firefox 1.5STAND.neano
Opera 8NESTAND./STAND.anoano
Opera 9STAND.neano