IE-Brouci (Chyby / Bugy IE)
(na úvodní stránku)3px bug
3px bug se projevuje nelogickým odsazením boxu či textu vedle plovoucího boxu o tři pixely.
Kde se chyba projevuje?
Internet Explorer v libovolné verzi
Za jakých podmínek?
Mějme box s určenou šířkou, který obsahuje jiný plovoucí box a text. Text bude od plovoucího boxu o tři pixely odsazen. Při aplikaci vlastnosti margin-left na box s textem tak, aby tento již plovoucí box vizuálně neobsahoval, se chyba projevuje nadále.
Dosadíme-li místo plovoucího boxu plovoucí generovaný řádkový prvek (typicky obrázek), tento se v ose x posune o tři pixely vlevo, text v obalovém boxu bude také odsazen o tři pixely.
Problémové kódy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; }
</style>
</head>
<body>
<div id="wrap">
<div id="float"></div>
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</div>
</div>
</body>
</html>
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; }
</style>
</head>
<body>
<div id="wrap">
<div id="float"></div>
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</div>
</div>
</body>
</html>
Kód je použit na této stránce. Prohlédněte si, jak ho vykresluje Váš prohlížeč.
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; border: 1px solid black; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; }
</style>
</head>
<body>
<div id="wrap">
<img src="bug.gif" id="float" alt="brouk" />
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</div>
</div>
</body>
</html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; border: 1px solid black; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; }
</style>
</head>
<body>
<div id="wrap">
<img src="bug.gif" id="float" alt="brouk" />
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</div>
</div>
</body>
</html>
Kód je použit na této stránce. Ve standardním režimu IE6 se neprojevuje, bylo tedy nutné odstranit DOCTYPE. Prohlédněte si, jak ho vykresluje Váš prohlížeč.
Správné vykreslení příkladu 1
Vykreslení příkladu 1 v Internet Exploreru
Správné vykreslení příkladu 2
Vykreslení příkladu 2 v Internet Exploreru
Řešení 3px Bugu
Řešení je snadné, stačí nastavit vlastnost margin-right plovoucího boxu na hodnotu −3px. V případě obrázku pak nastavujeme i vlastnost margin-left, a to na stejnou hodnotu.
Ošetřené kódy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; margin-left: -3px; }
</style>
</head>
<body>
<div id="wrap">
<div id="float"></div>
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</div>
</div>
</body>
</html>
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; margin-left: -3px; }
</style>
</head>
<body>
<div id="wrap">
<div id="float"></div>
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</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.
<html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; border: 1px solid black; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; margin: 0 -3px; }
</style>
</head>
<body>
<div id="wrap">
<img src="bug.gif" id="float" alt="brouk" />
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</div>
</div>
</body>
</html>
<head>
<title>3px Bug</title>
<style>
#wrap { width: 200px; border: 1px solid black; }
#box { background-color: #E8F3FF; }
#float { background-color: #FFEEE8; float: left; width: 50px; height: 50px; margin: 0 -3px; }
</style>
</head>
<body>
<div id="wrap">
<img src="bug.gif" id="float" alt="brouk" />
<div id="box">Duis porta volutpat justo. Aliquam pede neque, pulvinar convallis, vestibulum vel, fringilla nec, ante. Integer congue, enim at laoreet semper, orci velit dictum magna, posuere sodales justo magna ac sem. Nam suscipit fermentum lectus. Integer eu enim. Vestibulum porta leo semper sapien scelerisque dapibus.</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.
Odkazy k tématu
3px bug na Intervalu (Autor: Jan Bien)