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
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 style="float:left;background:#ff0000;width:180px;height:40px;margin-left:20px;clear:both;"></div> <div style="float:left;background:#00ff00;width:200px;height:40px;margin-left:0px;clear:both;"></div> <div 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 :)