Transparensfel, länk, inline, opera

Tillbaka till artiklar

Innehållsförteckning

Idag upptäckte jag en ny bugg relaterad till transparens.
Det är lite komiskt att två problem kan upptäckas på två dagar när vi har arbetat så mycket med transparens förr, men sånt händer väl. :)

I alla fall på sidan Kartan.net/lazzat ser ni ett gäng logotyper längst ner på första sidan.

Jag ville ha en trevlig liten hovereffekt på dessa och att leka med transparensen var ett ganska givet alternativ då det är riktigt snyggt och att vi bara har en bild (vi kan ju inte be alla företag göra en alternativ bild för hover).

Så jag satte 80% opacitet vid normalt läge och 100% vid hover.

Koden för bilderna var ungefär såhär:

Felet

Men det roliga var att i opera så blev bilderna att gå sönder rent renderingsmässigt. Övre halvan på bilderna försvann när jag aktiverade transparensen. Genom att ta bort "-moz-opacity: 0.80;" så kom hela bilden tillbaka.

Lösningen

Rent instiktivt gjorde jag länken, alltså a-elementet till ett blockelement, och då blev det genast bra.


Lösningen var alltså


Då vet vi att opacitet på inlinelement inte är helt pålitligt!

---

Gå till toppen