png « 我的天

2012-07

KO了Principe模板IE8下的黑边问题

By xrspook @ 22:36:50 归类于: 烂日记

对Principe在IE8下的PNG黑边效果我耿耿于怀！（Chrome、Firefox等完美支持的表示毫无压力）

虽然，我知道这是IE9之前的硬伤！在IE9之前的IE7和IE8虽然已经支持了PNG的透明功能，但它是通过偷偷调用fliter滤镜实现的，这个bug在于，如果你再使用其它滤镜，那么PNG的透明滤镜就歇菜了。

昨天花了不少时间在这里，未果。我一直觉得这是CSS的问题，但实际上，这纯粹是万恶IE的问题。

为什么我的滑动标题会出现黑框呢？

这个滑动标题栏的XHTML是这样的

1 2	<span class="stitch_header"><h2><span>{$text.title}</span><b class="text-icon"></b></h2></span> <span class="stitch_active"><h2><span>{$text.title}</span><b class="text-icon"></b></h2></span>

部分CSS是这样的

1
2
3

.stitch_active > h2,.stitch_header > h2 {color:#FFF;text-shadow:0 1px 0 rgba(0,0,0,0.5);font-weight:440;z-index:2;position:absolute;top:0;left:5px;width:450px;font-family:arial, serif;font-size:24px;-webkit-transform:translateX(-100%) rotate(-90deg);-webkit-transform-origin:right top;-moz-transform:translateX(-100%) rotate(-90deg);-moz-transform-origin:right top;-o-transform:translateX(-100%) rotate(-90deg);-o-transform-origin:right top;transform:translateX(-100%) rotate(-90deg);transform-origin:right top;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);margin:0;}
.stitch_active > h2 b,.stitch_header > h2 b {display:inline-block;position:absolute;top:5px;left:5%;text-align:center;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}  
.text-icon {background:url(http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png) no-repeat top left;width:32px;height:32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png');}

解释一下哈，为了把这个标题栏打竖显示为现在的样子，这里做了2个翻转，一个翻转是逆时针90度（rotation=3），一个翻转是顺时针90度（rotation=1）。不知道翻转是神马？请这边学习。然后呢，逆时针的用在了h2，顺时针的用在了控制icon图标的b。也就是说在load到png之前已经有2个滤镜了，png的默认IE滤镜必须的失效。肿么办呢？

我用了一个非常笨的办法，在每个icon PNG那里手动加上滤镜，且把b的顺时针转向功能禁止掉，改用在PS里直接把图片顺时针翻转90度。

代码类的，即在.text-icon里面加上filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png’)，这么一来就是强制在load这个png的时候用滤镜了。

至于为什么要把b的翻转禁止掉而用PS图片翻转呢？因为b优先于.text-icon，即便我在后者里设置了强制滤镜，b的滤镜还是优先，于是还是黑边。

PS下的翻转太简单了

翻转前