Black edge around rotated transparent png in IE7 and IE8

Question

There are many working solutions for displaying transparent pngs in IE, but all of these solutions will not work if the image is in a rotating container.

I tried

img{ background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); zoom: 1; } 

to get around IE's transparent png error, but it doesn't work.

Ive created a show show. http://jsfiddle.net/s__a/Hmyc2/

Please be careful if you visit this using Microsoft Internet Explorer 7 , this does not happen for IE8. Can anyone help display the rotated image correctly in IE7 / IE8?

Sincerely.

Answer 1

Only Solid Background Found Solution Found

It took some digging to get it together. My first guide was this site , which resulted in the following code change. Actually, I just noticed that I have the same code that you said did not work in your question, but still it does for me ... double-check my violins and see if it works now. Note that this fiddle worked for IE7 , but not IE8 ( img does not rotate).

 .test-1{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF)";/* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */ clip:rect(0px 276px 267px 0px); /* top,right,bottom,left */ } 

So, a little more digging and the response to a stack overflow helped make the script for IE8 too ! The original fix for IE8 was that the element converted with the Matrix filter had to add a z-index to fix the error without rotating the img child.

However, this “correction”, apparently, remains only partial. The problem with the rotating element remains at present for any transparency of the background itself, because if the alpha value for the gradient is set to transparent #00FFFFFF , then it only works on the non-rotating element.