IE 6 dvojnásobný margin

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

IE 6 dvojnásobný margin

Zdroj obrázku: neuvedeno

Problémů s vykreslováním v Internet Exploreru 6 je spoustu. Možná se zdá, že se nemá cenu jimi zabývat v době, kdy existuje verze 7 a bylo oznámen název další verze. Avšak v našich českých poměrech se na IE7 přechází pomalu a klasické chyby IE6 jsou stále aktuální. Dnešní problém se týká dvojnásobného odsazení prvků s vlastností float.

Hned radši napíši použitý kód. Ale chybu tam nehledejte. Nebo spíš klidně hledejte, ale nenajdete :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 <head>
  <title>IceBolt | chyba IE 6</title>
   <meta http-equiv="Content-Type" content="charset=windows-1250" />
 </head>
 <body>

<div&nbsp;style="float:left;background:#ff0000;width:180px;height:40px;margin-left:20px;clear:both;"></div>
<div&nbsp;style="float:left;background:#00ff00;width:200px;height:40px;margin-left:0px;clear:both;"></div>
<div&nbsp;style="float:left;background:#0000ff;width:120px;height:40px;margin-left:80px;clear:both;"></div>

 </body>
</html>

Problém je totiž jinde (jak je vidět z obrázku) - v Internet Exploreru. Detailněji lze říct, že IE6 prostě zdvojnásobí vlastnosti margin prvkům, které mají nastaven float na jinou hodnotu než none.
Tak dlouho jsem hledal a zkoušel různé způsoby řešení až jsem našel. Jednim způsobem řešení je mít pro IE6 jiné css styly, což ale není vhodné z důvodů optimalizace kódu.
Druhé řešení je jednodušší - stačí přidat vlastnost display:inline;
Abych řekl pravdu, tak tenhle způsob řešení jsem nečekal :)

Na vrch stránky  •  Domů