Az IE7-et azért szeretem jobban, mint az IE6-ot, mert végre kezeli az áttetsző png képeket. Ami design szempontból ugye fontos, igazán szépeket lehet vele alkotni. Olyan problémába ütköztem viszont, amivel eddig nem találkoztam, vagy csak nem figyeltem rá eléggé.
A probléma: az Internet Explorer 7 a háttérnek beállított repeat-y tulajdonságú kép áttetsző png részét randomra megduplázta, mintha többször egymásra tette volna. Ahogy görgettem az oldalt, ez a duplázódás el-elcsúszott, megrövidült, megnagyobbodott, ahogy az neki tetszett. És hogy néz ki? Így:
Bal oldalon lehet látni, hogy mit csinál az IE7, jobb oldalon pedig egy normális böngésző, esetünkben a Mozilla Firefox 3.5.5.
És akkor hogy lehet megoldani?
Hosszú utánaguglizás után megtaláltam a megoldást: arra a div-re (vagy bármi másra), aminek be van állítva az áttetsző png-s háttér, adni kell egy ilyen stílust:
.divclass {
background: url(/images/transparent.png) center repeat-y;
min-height:0;
}
És hogy miért? Az ún “haslayout” probléma miatt, ami a kedvenc böngészőnk, az IE fantasztikus tulajdonsága. És igen, továbbra is ironikusan írom ezt. Aki szeretne további részleteket megtudni erről, itt talál: hasLayout – Webmaster World.com. Aki meg az egyszerű megoldásokat keresi, annak ott a min-height: 0; És élünk tovább boldogan :)
Megosztás
Azért hihetetlen, hogy még mindig ilyen hibákkal kell megküzdeni :-)
Ne is mondd, pedig azt hittem, lassan megszabadulok az IE hibákról, de még 3-4 év kell neki…
Érdekes. Én is beleszaladtam ebbe a problémába karácsony körül de ezek szerint nem voltam elég kitartó, mert nem találtam rá megoldást, így más módszer után kellett nézni. De örülök hogy leírtad, megpróbálom észben tartani. :)