Domů › Implementační chyby prohlížečů

Implementační chyby prohlížečů

Box model

Box model

Vizuální prezentace dokumentu se skládá z bloků. Blok je čtyřhranný objekt, který tvoří:

  • obsah
  • vnitřní okraj (padding)
  • rámeček (border)
  • vnější okraj (margin)

Chyba výpočtu rozměrů prvku se projevuje u prohlížečů:

  • IE4 až IE5.5 ve všech režimech
  • IE6 pouze v přechodném režimu a režimu s rámci (u IE6 ve striktním režimu je box model v pořádku dle specifikace W3C)

Výpočet:

  • moderní prohlížeče dle specifikace W3C
    • width = šířka obsahu
    • height = výška obsahu
  • IE6-
    • width = šířka obsahu + vnitřní okraj (padding) + orámování (border)
    • height = výška obsahu + vnitřní okraj (padding) + orámování (border)

Pozadí elementu vyplňuje obsah, vnitřní okraj a rámeček (viditelné v místech přerušení). Vnější okraj je vždy transparentní.

Nastavení box modelu pomocí CSS

/* Box model (dimension = content + padding + border), http://html5please.com/#box-sizing */
*,
*:before,
*:after {
  -moz-box-sizing: border-box; /* FF(3.5-3.6) */
  -webkit-box-sizing: border-box; /* iOS(3.2-4.3), Android(2.1-3) */
  box-sizing: border-box; /* Opera17+, IE8+, Chrome28+, Safari5.1+ */
}
iframe {
  -moz-box-sizing: content-box; /* FF(3.5-3.6) */
  -webkit-box-sizing: content-box; /* iOS(3.2-4.3), Android(2.1-3) */
  box-sizing: content-box; /* Opera17+, IE8+, Chrome28+, Safari5.1+ */
}

Hodnota jednotky em

Chyba výpočtu hodnoty jednotky em vnořených prvků u IE6-:

  • IE6- při zvětšování písma velikost vnořených prvků v jednotkách em násobí (proto je např. vhodnější pro texty používat jednotku %).