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

对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>

<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');}

.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下的翻转太简单了

翻转前

翻转后

人肉看,当然觉得别扭,但整体效果,那是必须的好。

有图有真相!

于是,终于,在IE8下,Principe的icon图标算是正常了,内牛满面。

今天下午网友才提醒我Principe在IE9下显示怪异,这主要是IE9不支持filter但却不像Chrome和Firefox那样不加理会,而是自作主张搞了一些神马出来。

老天啊~~~ 试问一个不用IE的人怎么会知道这些问题呢!更杯具的是,单位的电脑是XP,XP无法安装IE9,我家里有WIN7可以安装IE9(现在是IE8),也有XP,能考察IE8。为什么,为什么,为什么现在才告诉我事实这么残酷呢???泪奔~~~

已经下载虚拟机,已经下载WIN7+IE8(可升级为IE9)的文件。

哎~~~ 玩网页设计,我容易么我~~~

本文链接:https://my.lmcjl.com/post/7217.html

展开阅读全文

4 评论

留下您的评论.