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
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;.