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>

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>

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

Správné vykreslení předchozího kódu

Vykreslení příkladu 1 v Internet Exploreru

Vykreslení předchozího kódu IE

Správné vykreslení příkladu 2

Správné vykreslení předchozího kódu

Vykreslení příkladu 2 v Internet Exploreru

Vykreslení předchozího kódu IE

Ř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>

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>

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)
3px bug na Position Is Everything (Autoři: John Gallant a Holly Bergevin)