IE7 áttetsző png háttér probléma

2009. november 19. | KATEGÓRIA: haladóknak, technikai | CÍMKÉK : , , ,

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:

IE7 áttetsző png háttér probléma

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

3 komment van ehhez: “IE7 áttetsző png háttér probléma”

  1. Wizi szerint:

    Azért hihetetlen, hogy még mindig ilyen hibákkal kell megküzdeni :-)

  2. Zina szerint:

    Ne is mondd, pedig azt hittem, lassan megszabadulok az IE hibákról, de még 3-4 év kell neki…

  3. codee47 szerint:

    É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. :)

Moderációs alapelvek itt.

(kötelező)
(kötelező ez is)


Fészbúk

Legyél a rajongóm a Facebook-on!

Lemmikki Active