做全兼容的ie6圆角和透明图片 2

我今天写了一个关于圆角的帖子，后来觉得写的实在是不咋地。方法也很繁琐落后，有人推荐了我一个工具叫做piecss，于是尝试着去用。

 

piecss这个插件是针对于ie浏览器不支持css3而做的。他可以让ie也实现css3的某些特性，比如阴影，圆角等。现在我们就来说一下圆角。

 

下载piecss（本页面提供下载）。

加到网站目录下。

 

然后在需要用到圆角的地方，写如下代码

 

 

.xo-blocktitle {
    height: 35px;
    background: url("../img/content_bar.png") repeat-y;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    behavior: url(/shbank/include/me/piecss/PIE.php);
}

 

这里的behavior的路径我这里是绝对路径，因为behavior的路径比较特别，保险我就写了绝对路径。这里的PIE.php会把PIE.htc返回来。

 

-moz-border-radius还有-webkit-border-radius是针对ff和opera的吧。这个不谈。

这样子简简单单，效果就出来了，爽爆了。

 

接下来就是透明png图片的问题。我这里用滤镜的方法。

 

         .xo-blocktitle h3{
        	background-image:url(img/btitle_1.png) !important;
			background-image:none;
			background-repeat:no-repeat;
         	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/btitle_1.png);
			}

 如果不在滤镜前加_，就会出现ff下无法正常显示的问题。所以用hack。而如果不用!important直接指定background-image（为了ff能显示背景），那么ie6下png图片又是不能正常显示，所以只能这么写了。聪明的读者应该能琢磨出来的。

 

 

 

评论

1 楼 SpaceKnight 2012-08-03  

这样实现的圆角，性能非常糟糕。另外，这个HTC有BUG。