Ez egy Kecs.es blog webfejlesztési ötletek, tanácsok, észrevételek

IE6 float és a margin bug

Tudom, hogy az IE6 halott és már el is temették. Sőt a jelenlegi kereskedelmi honlapokon amelyeket üzemeltetünk az IE6 előfordulása aránya kisebb mint 1%, de akkor is előfordulhat, hogy valaki egy olyan speciális környezetre kell, hogy optimalizáljon ahol még mindig IE6 a menő.

Ha ilyennel feladattal találkozol, akkor ez a post igen hasznos lesz számodra. Ismeretes ugyanis, ha IE6 alatt egy elemet float:left tulajdonsággal látunk el, akkor valami miatt a margint megduplázza a böngésző. Ezt nevezzük IE6 floating bug-nak. Ennek kivédésére a régebbi és általam ismert módszer az IE6-ra optimalizált CSS volt (minden úsztatott elem margin értéke az eredeti fele), azaz feltételhez kötött stíluslapot használtunk:

<!--[if IE 6]>
<style type="text/css" rel="stylesheet" media="screen" href="theme.ie6.css" />
<![endif]-->

Ezzel szemben ma egy új és sokkal egyszerűbb megoldást találtam. Egyszerűn az úsztatandó elemnek meg kell adni, hogy innentől legyen inline elem. A modern böngészőkben ennek semmi hatása, viszont IE6 esetén megjavítja a box modellt!

.float {
  float: left;
  display: inline;
}