IE-Brouci (Chyby / Bugy IE)
(na úvodní stránku)Box model bug
Box model bug se projevuje špatným výpočtem šířky či výšky boxu při použití vlastností padding či border.
Kde se chyba projevuje?
Za jakých podmínek?
Box je chybně vykreslen v případě, že je pro něj nastavena vlastnost width či height zároveň s jednou či oběma vlastnostmi padding a border. V takovém případě je celková šířka/výška boxu v IE, který běží v quirk módu, rovna uvedené šířce/výšce obsahu (width/height).
Problémový kód
<head>
<title>Box Model Bug</title>
<style>
#box { width: 200px; height: 200px; padding: 20px; border: 10px solid #FFEBE8; background-color: #FFF6F4; }
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Kód výše je použit na této stránce. Prohlédněte si, jak ho vykresluje Váš prohlížeč.
Správné vykreslení
Celková šířka je 260px (width + 2 × padding + 2 × border; konkrétně 200 + 2 × 20 + 2 × 10 = 260px).
Vykreslení v Internet Exploreru
Internet Explorer v quirk módu však spojí width, padding a border dohromady, takže pro samotný obsah boxu zbývá 140px.
Řešení Box Model Bugu
Řešení je snadné, pro Internet Explorer definovat box, který bude mít šířku (width) rovnu původní šířce + šířce paddingu a borderu. Musíme však rozlišovat dva případy:
Ošetřený kód pro IE6 ve standardním režimu
<html>
<head>
<title>Box Model Bug</title>
<style>
#box { width: 260px; height: 260px; padding: 20px; border: 10px solid #FFEBE8; background-color: #FFF6F4; voice-family : "\"}\""; voice-family : inherit; width: 200px; height: 200px; } </style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Ošetřený kód je na této stránce. Vyzkoušejte si, jak se zobrazuje ve Vašem prohlížeči.
Ošetřený kód pro IE v quirk módu
<head>
<title>Box Model Bug</title>
<style>
#box { width: 200px; height: 200px; padding: 20px; border: 10px solid #FFEBE8; background-color: #FFF6F4; }
* html #box { width: 260px; height: 260px; padding: 20px; border: 10px solid #FFEBE8; background-color: #FFF6F4; }
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Ošetřený kód je na této stránce. Vyzkoušejte si, jak se zobrazuje ve Vašem prohlížeči.
Druhým, a snad i používanějším, řešením, je tzv. Matrjoška. Podobně jako ve známé ruské figurce najdete další a další, tak i při tomto řešení použijeme několika do sebe vnořených boxů.
Matrjoška – univerzální kód pro libovolný prohlížeč
<head>
<title>Box Model Bug</title>
<style>
#obal1 { width: 260px; height: 260px; }
#obal2 { padding: 20px; border: 10px solid #FFEBE8; background-color: #FFF6F4; }
#box { width: 200px; height: 200px; }
</style>
</head>
<body>
<div id="obal1">
<div id="obal2">
<div id="box"></div>
</div>
</div>
</body>
</html>
Ošetřený kód je na této stránce. Vyzkoušejte si, jak se zobrazuje ve Vašem prohlížeči.
Historické souvislosti
Chybný box model – to je do jisté míry dosti zavádějící pojem. Způsob, jakým Internet Explorer boxy vykresluje v quirk režimu (kdy šířka boxu zahrnuje i vnitřní výplň a rámeček), je totiž datován daleko před specifikaci CSS1, která prosazuje pojetí boxu, jehož šířka se rovná šířce obsahu (tedy bez vnitřní výplně a rámečku). W3C se v tomto případě dopustilo nemalého faux pas, když prosazovalo v době, kdy existoval jednotný box model, jeho jiné pojetí. Toto téma velice dobře zpracoval Chamurappi na svém lehce kontroverzním webu Webylonu. Odkaz na konkrétní článek najdete níže.