IE-Brouci (Chyby / Bugy IE)

Peekaboo bug

Peekaboo bug se projevuje tak, že při vykreslení opticky chybí část textu na stránce. Text však lze myší označit.

Kde se chyba projevuje?

Internet Explorer 6 (standardní režim i quirk mód)

Za jakých podmínek?

Chyba se projevuje tehdy, máte-li v dokumentu plovoucí box (CSS vlastnost float), který je obtékaný odstavcovým textem. Důležitou podmínkou pro vznik chyby je, že spodní hrana plovoucího boxu musí být níž než spodní hrana odstavcového textu. V takovém případě Internet Explorer 6 nejdříve vykreslí text a až poté pozadí nadřazeného prvku, které text překryje. Při změně velikosti okna prohlížeče a jiných akcích, které donutí Internet Explorer překreslit obsah stránky, se text vykreslí. Neplatí to ale vždy, přesné podmínky jsou následující:

Dokument obsahuje box (v příkladu níže #peekaboo), který nemá určenou šířku a má definovánu libovolnou barvu pozadí.

Tento box obsahuje jiný box, který však je plovoucí (#float).

Plovoucí box je obtékán textem. Ten může být klidně rozdělen mezi více tagů, ale jeho celková výška nesmí být větší než výška plovoucího boxu.

Tento text je následován libovolným elementem, který má definovánu vlastnost clear.

Mezi boxy #peekaboo a #float neexistuje jiný prvek, který by měl definovánu výšku nebo šířku.

Problémový kód

<html>
  <head>
    <title>Peekaboo Bug</title>
    <style>
      #peekaboo { padding: 10px; background-color: #eee; }
      #peekaboo #float { width: 150px; height: 150px; float: left; background-color: #FFFDF5; border: 1px solid #EFD364; }
      #peekaboo #cleared-text { clear: left; background-color: #ddd; }
    </style>
  </head>
  <body>
    <div id="peekaboo">

      <div id="float">
        Plovoucí element
      </div>

      <div>Zde je text, který vlastně není vidět.</div>

      <div id="cleared-text">Donec vel arcu eu massa pretium volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut semper, magna a vehicula dictum, magna neque condimentum lacus, et tempor orci urna eu neque.</div>

    </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í

Vykreslení v Internet Exploreru

Řešení Peekaboo Bugu

Možných řešení jsou desítky, uvádím pouze ta obecně používaná:

Definujeme boxu, který je nadřazený plovoucímu (tzn. #peekaboo) šířku nebo výšku. Obyčejně se vystačí s width: 100%;

Aplikujeme Holly Hack. Ten spočívá v tom, že se pro IE nastaví boxu malá výška, Explorer si daný box stejně roztáhne (pracuje s vlastností height tak, jak by se mělo pracovat s min-height). Aplikace tedy vypadá následovně: #peekaboo: /* \*/ * html #peekaboo { height: 1px; } /* */

Zrušíme boxu #peekaboo barvu pozadí, není-li její definice nezbytně nutná.

U obtékajícího textu nastavíme vlastnost position na hodnotu relative.

Ošetřený kód

<html>
  <head>
    <title>Peekaboo Bug</title>
    <style>
      #peekaboo { padding: 10px; background-color: #eee; }
      /* \*/  * html #peekaboo { height: 1px; }  /* */
      #peekaboo #float { width: 150px; height: 150px; float: left; background-color: #FFFDF5; border: 1px solid #EFD364; }
      #peekaboo #cleared-text { clear: left; background-color: #ddd; }
    </style>
  </head>
  <body>
    <div id="peekaboo">

      <div id="float">
        Plovoucí element
      </div>

      <div>Zde je text, který vlastně není vidět.</div>

      <div id="cleared-text">Donec vel arcu eu massa pretium volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut semper, magna a vehicula dictum, magna neque condimentum lacus, et tempor orci urna eu neque.</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

Peekaboo bug na Intervalu (Autor: Jan Bien)

Peekaboo na Position Is Everything (Autoři: John Gallant a Holly Bergevin)