在IE7和IE8中旋转透明png周围的黑边

时间:2012-07-08 19:55:19

标签: css png rotation image transparent

有许多工作解决方案可以在IE中正确显示透明png,但如果图像位于旋转容器中,则所有这些解决方案都无效。

我试过

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

解决IE的透明png错误,但它不起作用。

我已经创建了一个展示案例。 http://jsfiddle.net/s__a/Hmyc2/

请确保您使用 Microsoft Internet Explorer 7 访问此内容,因此IE8不会实现轮换。 任何人都可以帮助在 IE7 / IE8中正确显示旋转的图像吗?

最好的问候。

1 个答案:

答案 0 :(得分:0)

找到仅有固体背景的解决方案

花了一些时间把它拼凑起来。我的第一个主角是this site,它产生了以下代码更改。 实际上,我刚才注意到,我在下面的内容与您在问题中所说的无效相同,但它对我有用 ...重新检查我的小提琴,看看它现在是否适合你。请注意,在this fiddle it worked for IE7 but not IE8中(img不会轮换)。

.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 */ 
}

更多挖掘Stack Overflow answer帮助制作a fiddle work for IE8 too! IE8最终解决方案是,使用Matrix过滤器转换的项目需要添加z-index,以便纠正它不会旋转子img元素的错误。

但是,这个“修复”显然仍然只是部分修复。 The issue on the rotated element目前仍然保留背景本身的任何透明度,因为如果设置了渐变的alpha值透明#00FFFFFF然后它只在非旋转元素上起作用。