Buggy float v IE 6

Jedná se o export původního článku - obsah není nijak zkrácen ani upraven.  •  Článek byl původně vydán: 21.11.2007 v 21:50:15.  •  Zobrazit ostatní články

Buggy float v IE 6

Zdroj obrázku: neuvedeno

Všichni, kdo někdy vytvořili něco určeného k následné publikaci na webu se občas nestíhají divit, když vidí svůj výtvor v několika webových prohlížečích. Informaci, kde jsou největší rozdíly ve vykreslování, znají všichni.

Tento příspěvek se týká použití CSS vlastnosti float a chybného vykreslení v Internet Exploreru 6. Z obrázku lze krásně vidět popisovaný problém u fialového rámečku. Zjednodušeně rozepíšu XHTML kód ...

<body>
  <div class="vrch">
    Lorem ipsum dolor sit amet, consectetuer ...
  </div>
  <div class="leve">
    Lorem ipsum dolor sit amet, consectetuer ...
  </div>
  <div class="prave" style="background:green;">
    Lorem ipsum dolor sit amet, consectetuer ...
  </div>
  <div class="prave" style="background:yellow;">
    Duis autem vel eum iriure dolor in ...
  </div>
  <div class="prave" style="background:gray;">
    Lorem ipsum dolor sit amet, consectetuer ...
  </div>
  <div class="prave" style="background:violet;">
    Duis autem vel eum iriure dolor in ...
  </div>
</body>

Dále CSS styly ...

*{margin:0px;padding:0px;}
body{padding:30px;}
.vrch{height:100px;background:red;}
.leve{height:250px;width:200px;float:left;background:blue;}
.prave{height:90px;margin-left:250px;}

Zajímavé je, že všechny elementy na pravé straně mají stejné vlastnosti a přesto se v Internet Exploreru zobrazují některé divně. Není težké zjistit, že toto zajímavé posunutí způsobouje element s vlastností float:left;, přestože by toto způsobovat neměl. Stránku si můžete prohlédnout zde.
Abych poznamenal, tak tuto 'vlastnost' Internet Exploreru lze naštěstí obejít tak, že objektu vlevo nastavíme kromě float ješte position:absolute;.

Na vrch stránky  •  Domů