Internet explorer 7 och transparens

Tillbaka till artiklar
Länge har vi ju väntat på den dagen att IE7 skulle komma, och rädda oss webbutvecklare som har haft sådana stora besvär med att få hemsidor att fungera som de ska i IE6.

Problemen med internet explorer är många, framförallt har IE haft en tendens att ha ganska dålig koll på webbstandarder - alltså de regler som definierar hur webb-kod ska tolkas.

Sen kom IE7 och en hel del saker var bättre, men webbläsaren har fortfarande inte en sportslig chans mot varken Opera eller Firefox - imponerande!

IE7 klarar i alla fall PNG-transparens rätt bra, i många fall helt felfritt.

Däremot upptäckte jag idag en ny bugg, faktiskt här på denna webbplats. Menyn i sidhuvudet såg fel ut!

Det som IE7 hade problem med i menyn var att dessa i skrivande stund fyra bilder har två typer av transparenser samtidigt. Titta i vilken webbläsare som helst förutom IE7 så kommer ni se att först och främst är inte motiven helt rektangulära - det är alltså "hål" runt motivet där man ser bakgrunden.

Peka sedan på ikonen så ser du att den både hoppar ett par pixlar uppåt samtidigt som den blir skarpare / ljusare.

Detta beror på att bilden har 65% opacitet från start och får 100% vid hover. Detta görs enbart med kod, såhär för att vara exakt:



Hela bilden blir alltså något genomskinlig i kombination med att delar av bilden är fullt genomskinlig i originalskick.

Här kommer IE7s problem in. Den verkar inte klara av att blanda två typer av transparens. IE6 och tidigare versioner kan inte hantera png-alpha alls - men det finns kända knep för att gå runt det. Såå, IE7 stöter alltså också på problem med transparensen, typiskt!

Det finns kanske knep för att gå runt även detta, det finns alltid finurliga programmerare som har kommit på alla möjliga tokiga sätt att lura IE att göra rätt.

Om det inte finns någon känd lösning nu så gäller det att vänta, det mesta kommer med tiden. Om man har tur kanske även Microsoft kan upptäcka sitt misstag och släppa en patch, men sånt ska man inte räkna med.

---

Gå till toppen